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，我在 CSS设置下启用了autoprefixer - ＆gt; CodePen中的供应商前缀。这似乎修复了最新的Safari，因为效果对我来说很好看。如果您有任何构建步骤，我强烈建议您添加Autoprefixer。如果你这样做，问题就解决了！

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

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

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

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