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 秒遅延するように設定されています。繰り返しになりますが、アルゴリズムは次のとおりです。2 番目のアニメーションには 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 に答える