如何在转换期间保持css元素不移动

当我在css元素上使用转换时，它下面的东西会移动。下面是对的jsfiddle一个例子：（看那一个的jsfiddle的代码片段似乎不工作） http://jsfiddle.net/pgdxd7su/ 如何在转换期间保持css元素不移动

h1{ 
 
font-size 
 
} 
 
h1:hover{ 
 
     display: inline; 
 
     font-size: 3em; 
 
     -webkit-transition: font-size .2s linear; 
 
     -moz-transition: font-size .2s linear; 
 
     -ms-transition:  font-size .2s linear; 
 
     -o-transition:  font-size .2s linear; 
 
     transition:   font-size .2s linear; 
 
     }

<!DOCTYPE html> 
 
     <body> 
 
     <h1>Hello</h1> 
 
     <hr> 
 
     </body>

会不会有解决这一问题，并从移动保持人力资源的方法吗？先谢谢了！

来源

2014-09-22 ShaneBacon

为什么你需要''

要移动保持？是不是会使'

'和单词'Hello'相互崩溃？你需要解决什么问题？动画开始时它是否是一个坏的过渡？ – Kyojimaru 2014-09-22 02:47:59

有时你只需要绝对定位。 – MindlessRanger 2014-09-23 05:02:27

良好，容易交叉默认margin浏览器的答案是你的HTML标记改成这样：

<div id="h1box"> 
     <h1>Hello</h1> 
    </div>

，然后你可以使用你的CSS这样的：

#h1box { 
    position:relative; 
    height:80px; 
    border-bottom:1px solid #333; 
} 
h1 { 
    position:absolute; 
    top:5px left:5px; 
} 
h1:hover { 
    display: inline; 
    font-size: 3em; 
    -webkit-transition: font-size .2s linear; 
    -moz-transition: font-size .2s linear; 
    -ms-transition: font-size .2s linear; 
    -o-transition: font-size .2s linear; 
    transition: font-size .2s linear; 
}

我们基本上摆脱hr元素的浏览器渲染之间的差异，使用更加简单，轻松地适应元素，如div，然后通过应用position:absolute到h1元素移除元素的流动，使动画不会影响下面的任何东西。简单和跨浏览器的解决方案，在每个浏览器中看起来都一样。

See fiddle here

来源

2014-09-22 03:27:20 Devin

我想你需要解决什么只是animation上悬停不好，也许这是你想要的：Fiddle

您animation很糟糕，因为你声明display: inline;的:hover内，而不是在主element本身，这将使默认display: block;从<h1>更改为display: inline;只有当它被徘徊。它上窜下跳，因为inline element不能有margin上默认其<h1>，所以你需要什么，以避免不良animation要么改变你的风格，这

h1 { 
    -webkit-transition: font-size .2s linear; 
    -moz-transition: font-size .2s linear; 
    -ms-transition: font-size .2s linear; 
    -o-transition: font-size .2s linear; 
    transition: font-size .2s linear; 
} 
h1:hover { 
    font-size: 3em; 
}

这将保持默认的一个的<h1>

h1 { 
    display: inline; 
    -webkit-transition: font-size .2s linear; 
    -moz-transition: font-size .2s linear; 
    -ms-transition: font-size .2s linear; 
    -o-transition: font-size .2s linear; 
    transition: font-size .2s linear; 
} 
h1:hover { 
    font-size: 3em; 
}

block元素，这将在<h1>的默认block元素更改为inline

h1 { 
    margin: 0; 
    -webkit-transition: font-size .2s linear; 
    -moz-transition: font-size .2s linear; 
    -ms-transition: font-size .2s linear; 
    -o-transition: font-size .2s linear; 
    transition: font-size .2s linear; 
} 
h1:hover { 
    display: inline; 
    font-size: 3em; 
}

这将在<h1>的默认block元件更改为inline上hover，但除去其使得跳动（这将导致与所述第二个中的相同）

来源

2014-09-22 03:22:27 Kyojimaru

如何在转换期间保持css元素不移动

回答

相关问题