Question

当我在css元素上使用Transition时，它下面的东西会移动。这是一个关于JSFiddle的例子： http://jsfiddle.net/pgdxd7su/ （看看JSFiddle的一个。代码片段似乎不起作用）

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>

有没有办法解决这个问题，并保持小时移动？先谢谢！

Answer 1

嗯，简单的跨浏览器答案是将您的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），然后通过应用{删除元素流{1}}到position:absolute元素，因此动画不会影响其下方的任何内容。简单的跨浏览器解决方案，在每个浏览器中看起来都相同。

See fiddle here

Answer 2

我想你需要修复的只是悬停时的错误animation，也许这就是你想要的：Fiddle

您的animation看起来很糟糕，因为您在display: inline;内声明:hover而不是主element本身，这将使默认display: block;来自<h1>只有在{h}徘徊时才会更改为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;
}

这将保留block

的默认<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>元素更改为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;
}

这会将block的默认<h1>元素更改为inline上的hover，但会移除默认margin，这会使其变为跳跃（这将是结果与第二个相同）

如何防止css元素在转换期间移动

2 个答案: