Question

下面的代码演示了我如何将CSS转换应用于height属性。我对CSS转换的理解（我所看到的支持）是它们是异步的。谁能告诉我如何使CSS转换同步？我特别想使用CSS过渡（即不是jQuery动画或其他方法）。

CSS：

.animated {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0px,0px,0px);
    transition: height 1.5s;
    -webkit-transition: height 1.5s;
    -webkit-perspective: 1500;
    -webkit-backface-visibility: hidden;
}

HTML：

<div id='someElement' class='animated'></div>

JavaScript的：

$("#someElement").css("height","200px");
//More javascript code I'd like to execute after the css animation has completed

Answer 1

好吧，没有办法让它同步，但你可以等待动画结束，有效地模拟同步行为

解决方案

var crossBrowserEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';

$("#someElement").css("height","200px");

$("#someElement").one('crossBrowserEvent',function(e) {
    do_some();
    magic();
    here();
    when_the_animation_ends();
});

一些其他评论

因为css3动画还没有完全跨浏览器，所以你必须听一个以上的事件。如果某些浏览器同时实现新的 animationEnd 事件以及例如 webkitAnimationEnd ，则可能会出现一些问题。这就是为什么我把一个事件attacher而不是放在上。

Answer 2

这是一个使用纯js和webkit前缀来创建基于顺序的类更改的代码。

在DEMO中，我使用的不仅仅是一个动画，因此多次执行处理函数。这就是为什么我检查propertyName（在我的情况下'颜色'）。如果颜色动画结束处理程序函数，则使用classList.toggle('active');更改className 每个类都有不同的过渡长度。

function handler(e){
 //here is when the transition ends.
 // add your code here or:
 if(e.propertyName=='color'){
  e.target.classList.toggle('active');
 }
}
var div=document.getElementsByTagName('div')[0];
div.addEventListener('webkitTransitionEnd',handler,false);
div.classList.toggle('active');

DEMO （chrome safari android ios）

http://jsfiddle.net/jaqT7/

如果您想要更多支持搜索各种前缀。-webkit，-ms，-moz 以及正确的transitionend处理程序。

以下是使用简单延迟

的顺序动画的示例

https://stackoverflow.com/a/20778358/2450730

是否可以使CSS转换同步？

2 个答案:

解决方案

一些其他评论