Question

我正在尝试使用jQuery和CSS3为div对象设置动画。但我得到一个奇怪的行为。效果仅适用于chrome调试模式。这是代码

var $s = $('#animateMePlease');
$s.css('transition-duration', 0+'ms');
$s.css({
opacity:0,
display:'block'
});
// debugger; // only works when i stop once code execution here, and release again
$s.css('transition-duration', d.duration+'ms');
$s.css({
opacity:1
});

感谢您的帮助。

Answer 1

由于您已经在使用jQuery，为什么不使用：

$('#animateMePlease').hide().fadeIn(d.duration);

让jQuery以浏览器可合并的方式处理细节 - 将jQuery browser support与the support for CSS3 transitions进行比较。

（确保您在d.duration）

中确实有一些号码

更新

阅读完评论后，我明白为什么你不想使用标准的jQuery方式。此外，如果您已经在使用这些转换，那么您已经依赖CSS3支持，因此使用transition-duration不是问题。

在这种情况下，你可以改变这个：

$s.css({
  opacity: 1
});

到此：

setTimeout(function () {
  $s.css({
    opacity: 1
  });
}, 10);

所以你的代码变成了：

var $s = $('#animateMePlease');
$s.css('transition-duration', 0 + 'ms');
$s.css({
  opacity: 0,
  display: 'block'
});
$s.css('transition-duration', d.duration + 'ms');
setTimeout(function () {
  $s.css({
    opacity: 1
  });
}, 10);

添加一个小超时将确保在不透明度变为1之前渲染DOM到目前为止的状态。

请参阅DEMO。

使用jQuery的CSS3效果仅适用于chrome调试

1 个答案:

更新