个人中心
gpt4 book ai didi

javascript - 在页面加载时触发动画

转载 作者：行者123 更新时间：2023-12-04 07:43:45 27 4
gpt4 key购买 nike

我有一个代码，当它们悬停时通过在它们上添加第二个 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>

谢谢!

最佳答案

我将给出两个解决方案。
包装事件 mouseenter带 window 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>

关于javascript - 在页面加载时触发动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67308001/

27 4 0
文章推荐： karate - 从 Spock 运行 Karate(1.0.1) 测试时，在模拟中设置的系统属性最终在 karate.properties ['message' 中未定义]
文章推荐： Python - Googletrans 用于循环中的多个 txt 文件
文章推荐： html - 在 Godot 中关闭游戏
文章推荐： php - 将标准 WooCommerce 产品小部件添加到博客文章时出错
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com