javascript - CSS3 动画 - 在类上向左移动添加不起作用

Question

我目前正在研究并学习如何正确制作 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;
}

Answer 1

通过添加该类，您可以从静态定位切换到绝对定位，这没问题，但是没有什么可以转换的，因为静态元素的 left 值为 auto (从/到自动值的转换不可靠，请参阅 this bug report )

所以添加:

.characterBox{
  left: 0px;
}

您还必须切换定义的顺序，因为您的第二个 left 规则会覆盖第一个 ( http://jsfiddle.net/yLgkK/)