gsap和css过渡同时可能吗?

时间:2016-02-29 22:51:25

标签: javascript html css transition gsap

如何在同时具有css过渡属性的dom元素上使用GSAP TweenMax yoyo补间? 默认情况下,元素执行补间一次(ff,chrome - 不是),但不重复yoyo?除了放弃css转换外,是否有解决方法?

 HTML:
<ol >
        <li class="withcsstransition">with css transition</li>
        <li >without css transition </li>
</ol>

CSS:
.withcsstransition {
  transition: all 0.8s ease;
}
.active { 
    background: #AAAAAA;
}   

 JS:
 TweenMax.fromTo('li', 0.3, {
    className: "-=active"
 }, {
   className: "+=active",
   yoyo: true,
   repeat: -1,
 }); 

codepen example

2 个答案:

答案 0 :(得分:0)

all CSS属性中的transition替换为专门定位属性,即min-height。因此,CSS的transition行应如下所示:

...
transition: min-height 0.8s ease;
...

我不完全理解为什么背后的原因。在我看来,transition属性的all关键字会以某种方式覆盖并优先于以后应用于任何元素的任何CSS属性。

答案 1 :(得分:0)

你只花了半天就遇到了同样的问题。我的GSAP动画都真的很迟钝,并且缓动似乎没有效果。我正在对属性all使用一些css过渡来更改标题的颜色并为汉堡菜单设置动画。当我最终删除all属性并将其替换为backgound-color和transform时,一切正常。