如何将这个CSS3动画转换为Sass mixin？

Question

我有以下动画代码......

.a {
    background: url(../Images/experience-1.jpg) center center no-repeat red;
    z-index: 7;

    -webkit-animation-delay: 3s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 3s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 3s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 3s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.b {
    background: url(../Images/experience-2.jpg) center center no-repeat yellow;
    z-index: 6;

    -webkit-animation-delay: 18s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 18s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 18s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 18s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.c {
    background: url(../Images/experience-3.jpg) center center no-repeat pink;
    z-index: 5;

    -webkit-animation-delay: 33s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 33s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 33s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 33s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.d {
    background: url(../Images/experience-4.jpg) center center no-repeat green;
    z-index: 4;

    -webkit-animation-delay: 48s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 48s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 48s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 48s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.e {
    background: url(../Images/experience-5.jpg) center center no-repeat orange;
    z-index: 3;

    -webkit-animation-delay: 63s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 63s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 63s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 63s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

.f {
    background: url(../Images/experience-6.jpg) center center no-repeat purple;
    z-index: 2;

    -webkit-animation-delay: 78s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: fadeout;
    -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -moz-animation-delay: 78s;
    -moz-animation-duration: 5s;
    -moz-animation-name: fadeout;
    -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    -o-animation-delay: 78s;
    -o-animation-duration: 5s;
    -o-animation-name: fadeout;
    -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

    animation-delay: 78s;
    animation-duration: 5s;
    animation-name: fadeout;
    animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}

...而我想要做的是在将来更容易改变价值观.

只是为了解释每个类应用于div带有背景图像的a ,并且每个类div绝对位于彼此之上.因此淡出顶部div将显示其div下方的另一个.

初始动画延迟为3秒,然后每个的持续时间div始终为5秒.

但对于每个课程,我都会将动画推迟上一个动画完成所需的时间.

所以.b {}类设置为延迟18秒.解决这个问题的方法是:第一个动画有3秒延迟+ 5秒持续时间,总共等于8秒+额外10秒,以便用户正确看到下一个图像.

所以c.{}类被设置为延迟33秒.同样算法是:第二个动画具有18秒延迟+ 5秒持续时间,总共等于23秒+额外10秒,以便用户正确地看到下一个图像.

所以这是动画的前提,我需要弄清楚如何通过Sass自动化(如果客户说"你知道什么,我希望持续时间为10秒").

在此先感谢您提供给我的任何帮助.

Answer 1

步骤1.将其包裹在mixin中,使用变量跟踪持续时间

对于初学者,你可以将整个块包装在一个mixin中并使用一些变量(全局,所以要小心)来跟踪总持续时间和动画索引:

$queue-max-z-index: 7;
$queue-total-delay: 0;
$queue-index: 0;

@mixin queue-animation($class, $color, $delay: 0, $duration: 5s, $viewing-time: 10s) {
    .#{$class} {
        background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
        z-index: $queue-max-z-index - $queue-index;

        -webkit-animation-delay: $queue-total-delay + $delay;
        -webkit-animation-duration: $duration;
        -webkit-animation-name: fadeout;
        -webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        -moz-animation-delay: $queue-total-delay + $delay;
        -moz-animation-duration: $duration;
        -moz-animation-name: fadeout;
        -moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        -o-animation-delay: $queue-total-delay + $delay;
        -o-animation-duration: $duration;
        -o-animation-name: fadeout;
        -o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        animation-delay: $queue-total-delay + $delay;
        animation-duration: $duration;
        animation-name: fadeout;
        animation-fill-mode: forwards; /* this prevents the animation from restarting! */

        $queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
        $queue-index: $queue-index + 1;
    }
}

现在您可以设置这样的动画:

@include queue-animation(a, red, 3s);
@include queue-animation(b, yellow);
@include queue-animation(c, pink);
@include queue-animation(d, green);
@include queue-animation(e, orange);
@include queue-animation(f, purple);

函数默认值表示可以为单个动画覆盖的全局默认值.另请注意,它会自动跟踪设置的动画的计数(索引)和所述动画的总持续时间,因此您可以更改任何一个的持续时间或延迟,并且所有后续动画都将更新.

第2步.清理这些前缀

要重构一点,你可以包括一个我用于供应商前缀属性的小助手:

// Apply common prefixes to a property.
@mixin prefix($property, $value, $apply-to: property, $prefixes: -webkit -khtml -moz -ms -o) {

    @if $apply-to == property {
        @each $prefix in $prefixes {
            #{$prefix}-#{$property}: $value;
        }

    } @else if $apply-to == value {
        @each $prefix in $prefixes {
            #{$property}: $prefix + -$value;
        }

    } @else if $apply-to == both {
        @each $prefix in $prefixes {
            #{$prefix}-#{$property}: $prefix + -$value;
        }
    }

    #{$property}: $value;
}

现在你的函数看起来像这样:

@mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
    .#{$class} {
        background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
        z-index: $queue-max-z-index - $queue-index;

        @include prefix(animation-delay, $queue-total-delay + $delay);
        @include prefix(animation-duration, $duration);
        @include prefix(animation-name, fadeout);
        @include prefix(animation-fill-mode, forwards); /* this prevents the animation from restarting! */

        $queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
        $queue-index: $queue-index + 1;
    }
}

第3步.使用animation速记

再进一步,可以使用的animation简写:

@mixin queue-animation($class, $color, $delay: 0s, $duration: 5s, $viewing-time: 10s) {
    .#{$class} {
        background: url(../Images/experience-#{$queue-index + 1}.jpg) center center no-repeat $color;
        z-index: $queue-max-z-index - $queue-index;

        @include prefix(animation, fadeout $duration ($queue-total-delay + $delay) forwards);

        $queue-total-delay: $queue-total-delay + $delay + $duration + $viewing-time;
        $queue-index: $queue-index + 1;
    }
}

谦虚的免责声明

我对Sass还是比较新的,所以我的建议是主观的,可能与最佳实践不符.这取决于你在多大程度上喜欢这个,所以请随意忽略或修改任何让你感到不舒服的建议.