Question

我有一个代码，当它们悬停在某些元素上时，通过在它们上添加第二个 css 类来触发动画，一旦完成，该类将被删除，使其再次变为静态。我不知道如何在每次加载页面时使动画发生，我尝试添加一个“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

我会给出两个解决方案。

用窗口 mouseenter 事件包装事件 load。

$(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>

在页面加载时触发动画

2 个答案: