Question

如何在同时具有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

Answer 1

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

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

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

Answer 2

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

gsap和css过渡同时可能吗？

2 个答案: