2

我正在使用 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 时,它们会为它们的内联样式位置设置动画。我怎样才能做到这一点?

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

4

1 回答 1

2

在追加之前通过设置触发 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()

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

于 2012-10-25T20:01:36.370 回答