我目前正在研究并学习如何正确制作 CSS3 动画,但遇到了一些麻烦。我有一个框当前位于页面的水平中心,我希望在应用类时通过过渡将其移动到左侧。
characterBox 在页面加载时已经附加到 div。但是,当我使用 jQuery 将 characterActive 添加到 div 时,它直接向左移动而没有过渡。我究竟做错了什么?任何帮助表示赞赏!
.characterActive {
left: 15px;
position: absolute;
}
.characterBox {
display: inline-block;
padding-left: 8px;
padding-right: 8px;
padding-top: 15px;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
/* Sit Horizontally */
margin: auto;
text-align: center;
}
最佳答案
通过添加该类,您可以从静态定位切换到绝对定位,这没问题,但是没有什么可以转换的,因为静态元素的 left
值为 auto
(从/到自动值的转换不可靠,请参阅 this bug report )
所以添加:
.characterBox{
left: 0px;
}
您还必须切换定义的顺序,因为您的第二个 left
规则会覆盖第一个 ( http://jsfiddle.net/yLgkK/)
关于javascript - CSS3 动画 - 在类上向左移动添加不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22570886/