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

Question

我有一个 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;
    }

Answer 1

为了快速检查 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 而不是指定所有不同的属性，尽管这会影响任何和所有变化的属性。