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 escape-in​​; 和 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/