在开始演示之前，我给出取得CSS3 WebKitTransitionEvent事件名的方法：
var getTransitionEndEventName = function(){ var obj = { 'WebKitTransitionEvent': 'webkitTransitionEnd', 'TransitionEvent': 'transitionend', 'OTransitionEvent': 'oTransitionEnd' }, ret ,e; for (var name in obj) { try { document.createEvent(name); ret = obj[name]; console.log(ret) } catch (ex) { } } getTransitionEndEventName = function(){ return ret } return ret; } getTransitionEndEventName();
由于无法在webkit与opera上清除transition，这事件就可能无数次触发，这可不是我们愿意看到的。因此我们每次在中断或停止动画必须就元素解除绑定。
好了，下面进入正题。
方案一:使用一个新节点做替身。我们可以用cloneNode(true)弄一个一模一样的节点插入到原节点的前面，然后隐藏原来,将transition设置在新节点上,当动画中断或停止时，把当前的样式覆盖到原节点上,让它显示出来,再移除新节点!
但人们想在动画中进行对它进行操作呢?因为节点已不是原来的节点,因此维护成本非常高!
方案2：无视transition的永久效果。因为在中断或停止时，我们把当前样式取出来再覆盖上去，也可以中止动画。
但无视终归是逃避问题，不清除transition，以后每次对元素的CSS操作都会动画化（除了在FF中），因此也不可行。
综上所述，CSS3对行为层的干涉至今还是不成熟的。作为一个成熟的框架不应该把它作为动画的手段。
最新评论