gpt4 book ai didi

css - ng-enter-stagger 动画不适用于 safari

转载 作者:行者123 更新时间:2023-11-28 11:33:51 26 4
gpt4 key购买 nike

我有一个 ng-enter-stagger 动画,它适用于 chrome 和 firefox,但不适用于 safari。

我已经在过渡定义前添加了 -webkit- 但它不适用于 safari。看这个codepen问题的演示

    .animate-repeat.ng-enter-stagger,
.animate-repeat.ng-leave-stagger {
-webkit-transition-delay: 400ms;
-webkit-transition-duration: 0s;
transition-delay: 400ms;
transition-duration: 0s;
}

最佳答案

为了快速检查 Safari,我在 CodePen 的 CSS settings -> Vendor Prefixing 下打开了 autoprefixer。这似乎修复了最新的 Safari,因为我觉得效果不错。如果您有任何类型的构建步骤,我强烈建议您将 Autoprefixer 添加到组合中。如果这样做,问题就解决了!

如果您是 DIYer,当您为属性添加供应商前缀并使用转换/转换时,您还必须为属性值添加供应商前缀:

    .animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition: -webkit-transform 1750ms;
transition: transform 1750ms;
}

在您上面链接的 CodePen 中的几个实例中,您没有这样做。这样做应该可以解决问题!您在某些浏览器中使用某些效果的原因是因为它们支持您正确编写的无前缀版本。

解决此类问题的另一种 hacky 方法是使用 -webkit-transition: all 而不是指定所有不同的属性,尽管这会影响任何和所有变化的属性。

关于css - ng-enter-stagger 动画不适用于 safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31372408/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com