2

我有以下动画代码...

.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具有背景图像的图像，并且每个类div都绝对位于彼此之上。因此，淡出顶部div将显示其div下方的另一个。

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

但是对于每个班级，我将动画延迟与前一个动画完成所需的时间相同。

因此 .b{} 类设置为延迟 18 秒。解决方法是：第一个动画有 3 秒延迟 + 5 秒持续时间，这等于总共 8 秒 + 10 秒额外时间，让用户正确看到下一张图像。

因此 c.{} 类设置为延迟 33 秒。同样的算法是：第二个动画有 18 秒的延迟 + 5 秒的持续时间，这等于总共 23 秒 + 10 秒额外的时间让用户正确地看到下一张图像。

所以这是动画的前提，我需要弄清楚如何通过 Sass 自动化它（以防客户说“你知道吗，我现在希望持续时间为 10 秒”）。

提前感谢您能给我的任何帮助。

4

2 回答 2

6

步骤 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 还比较陌生，所以我的建议是主观的，可能不符合最佳实践。不过，这取决于您对这一点的满意程度，因此请随意忽略或修改任何让您感到不舒服的建议。

于 2012-10-22T20:12:12.073 回答
1

不要打扰，有一个Compass 插件可以为你做这件事。完全相同的代码将被拉入 Compass Core 的下一个版本，所以很快你甚至不需要使用插件。您将获得额外的优势，即其他人将帮助您的动画代码保持最新。当您使用它时，您可以拉入Dan Eden 的 Animate.css的Compass 端口。

于 2012-10-23T04:41:21.973 回答