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

Question

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

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

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

.appt 类具有-webkit-transition: all .3s ease-in;withtop: 0; left: 0声明。

我认为当这些约会被附加到 DOM 时，它们会为它们的内联样式位置设置动画。我怎样才能做到这一点？

score 2 · Accepted Answer

在追加之前通过设置触发 CSS 转换left: 0，然后在追加发生后通过 .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()

1 回答 1