Question

我有3个div，我正试图逐个制作动画。作为测试我希望他们一个接一个地向下移动50px。

我有以下SCSS

    .action {
        margin: 20px 0;
        text-align: center;
        transform: translate(0,0);
        transition: all .5s;
        &.animate {
            transform: translate(0, 50px);
        }
        &.animate-delay-1 {animation-delay: 1s;}
        &.animate-delay-2 {animation-delay: 2s;}
    }

这是我的HTML

            <div class="actions">
                <div class="action animate animate-delay-0">
                    <i class="fa fa-envelope-o"></i>
                    <span class="person"></span> receives her questions by email
                </div>
                <div class="action animate animate-delay-1">
                    <span class="person"></span> fills in the answers to her questions
                </div>
                <div class="action animate animate-delay-2">
                    <span class="person"></span> receives the results by email
                </div>
           </div>

我觉得我做错了什么？他们都在同一时间制作动画。这就像延迟被忽略了......有什么想法吗？谢谢！

Answer 1

您希望transition-delay进行转换。我最近写了一篇可能有用的SASS mixin：

@mixin increment-transition ($el, $time, $num, $offset: 0) {
    $chain: '';

    @for $i from 1 through $num {
        $chain: $chain + ' + ' + $el;

        & #{$chain} {
            transition-delay: #{$i * $time + $offset}s;
        }
    }
}

你用它就像：

div.action {
    @include increment-transition(div.action, .05, 40);
}

编辑：它产生类似的东西：

div.action {transition-delay: 0}
div.action + div.action {transition-delay: 0.5s}
div.action + div.action + div.action {transition-delay: 1s}
div.action + div.action + div.action + div.action {transition-delay: 1.5s}

Answer 2

您不使用班级animate-delay-1

试试这个：

    <div class="actions">
            <div class="action">
                <i class="fa fa-envelope-o"></i>
                <span class="person"></span> receives her questions by email
            </div>
            <div class="action animate-delay-1">
                <span class="person"></span> fills in the answers to her questions
            </div>
            <div class="action animate-delay-2">
                <span class="person"></span> receives the results by email
            </div>
       </div>

CSS3动画div由div延迟

2 个答案: