在页面加载时触发动画

Question

我有一个代码可以在悬停某些元素时触发动画，方法是在它们上面添加第二个 css class，一旦完成，这个 class 就是删除，因此它再次变为静态。我不知道每次加载页面时如何使动画发生，我尝试添加一个“window.load”函数，但没有成功。如果有人能告诉我，我将不胜感激。

这是片段：https://jsfiddle.net/6fmno8vb/1/

$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
    $(this).addClass("done");
    if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
        $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
    }
});

$(".main-logo").mouseenter(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});

body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

谢谢！

Answer 1

我给出两个解决方案

用 window load 事件包装事件 mouseenter。

$(window).on('load', function() {
    ...
    $(".main-logo").trigger("mouseenter");
});

$(window).on("load", function () {
    $(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
        $(this).addClass("done");
        if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
            $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
        }
    });

    $(".main-logo").mouseenter(function () {
        $(".draw, .draw2, .logo-box").addClass("anim");
    });

    $(".main-logo").trigger("mouseenter");
});

body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

如果您在页面启动后立即触发鼠标事件，那么它并不总是看起来高效。我建议您将事件 mouseenter 调用包装在 setTimeout() 中，为延迟指定任何 适当的 值。

setTimeout(function () {
    $(".main-logo").trigger("mouseenter");
}, 1000);

setTimeout(function () {
    $(".main-logo").trigger("mouseenter");
}, 1000);

$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
    $(this).addClass("done");
    if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
        $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
    }
});

$(".main-logo").mouseenter(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});

body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

Answer 2

亲爱的，根据你的问题，你希望在页面加载时加载动画，所以我添加了文档。就绪功能和您的旧功能也在那里，因此悬停和页面加载功能都可用

$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
    $(this).addClass("done");
    if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
        $(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
    }
});

$(document).ready(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});

$(".main-logo").mouseenter(function () {
    $(".draw, .draw2, .logo-box").addClass("anim");
});

body {
    width: 100%;
    background: #fff;
}

.main-logo {
    float: left;
    margin: 0 30%;
    display: block;
}

.logo-box {
    background: #000;
    width: 200px;
    height: 200px;
    float: left;
    transition: all 0.25s ease;
    transform: scale(1);
}

.logo-box.anim {
    transform: scale(1.07) translate(-3px, 3px);
    transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}

.draw {
    background: #d7cf00;
    width: 50px;
    height: 50px;
}

.draw.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

.draw2 {
    background: #db0a28;
    width: 50px;
    height: 50px;
}

.draw2.anim {
    animation: animate 1.5s ease-in;
    animation-fill-mode: forwards;
}

@keyframes animate {
    0% {
        transform: scale(0.5);
    }
    20% {
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="main-logo">
        <div class="logo-box">
            <div class="draw"></div>
            <div class="draw2"></div>
        </div>
    </div>
</body>

在页面加载时触发动画

Trigger animation on page load

html

javascript

css

jquery

css-animations