gsap和css可以同时过渡吗？答案

【问题标题】：gsap and css transition at the same time possible?gsap和css可以同时过渡吗？
【发布时间】：2016-06-13 04:30:47
【问题描述】：

如何在也具有 css 过渡属性的 dom 元素上使用 GSAP TweenMax yoyo tween？默认情况下，该元素执行一次补间（ff，chrome - 不是 ie），但不会像 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

【问题讨论】：

不太确定预期的行为是什么。你能详细说明一下吗？
@TahirAhmed 带有css过渡风格的元素也应该受yoyo tween约束。请查看 codepen 示例，其中一个项目具有 bg 颜色补间，而另一个没有。唯一的区别是 css 转换规则。谢谢。

标签： javascript html css transition gsap

【解决方案1】：

您好，只需花半天时间就可以解决同样的问题。我的 GSAP 动画都变得非常滞后，而且缓动似乎不起作用。我使用了一些带有属性 all 的 css 转换来更改标题的颜色并为汉堡菜单设置动画。当我最终删除 all 属性并将其替换为背景颜色和变换时，一切正常。

【讨论】：

【解决方案2】：

在您的 transition CSS 属性中替换 all 以专门针对属性，即 min-height。所以你的 CSS 的 transition 行应该是这样的：

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

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

【讨论】：

感谢 Tahir 的建议，让我进行了进一步的调查。我知道 tweenmax 补间发生在所有列表元素上，但使用 css 规则的时间而不是它自己的补间（有线）的时间。我通过延迟 tweenmax tween 的重复来发现这一点，以便给 css 规则足够的时间来完成。我编辑了codepen example，因此可以看到两个补间彼此相邻。