javascript - 如何使用 Javascript 在附加到 DOM 的元素上触发 CSS3 转换？

Question

我正在使用 javascript 构建一个甘特图样式的日程 View ，并试图让我的约会从左侧过渡到它们的绝对定位的内联值。我想使用 CSS3 转换来处理这个问题。

个人约会是通过 javascript 添加和绘制的，在标记中看起来像这样；

<div class="appt" style="width: 12.5%; left: 32.5874%;"></div>

.appt 类有 -webkit-transition: all .3s ease-in; with top: 0;左:0 声明。

我认为当这些约会附加到 DOM 时，它们会动画化到它们的内联样式位置。我该怎么做？

这是一个相关的简单示例。 http://codepen.io/aaronlsilber/pen/ocqFl

Answer 1

通过在追加之前设置 left: 0 触发 CSS 转换，然后在追加发生后通过 .css() jQuery 函数更改内联 css。

例子:

$('<div class="appt" style="width: 12.5%; left: 32.5874%;"></div>').appendTo(/*ELEMENT*/);

$('.appt').css('left', '32.5874%');

警告:并非每个浏览器都支持 CSS 转换(例如 IE9)，如果这种效果对于您的用户体验来说是必须的，我建议您使用 jQuery .animate()

http://api.jquery.com/animate/