在vue应用程序中创建一个震动效果

最新推荐文章于 2024-07-24 19:29:36 发布

酱爆 Crazy

最新推荐文章于 2024-07-24 19:29:36 发布

阅读量646

点赞数

分类专栏：笔记文章标签：编辑器

本文链接：https://blog.csdn.net/weixin_43402404/article/details/127123895

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何在Vue.js应用程序中创建一个震动效果。作者分享了一个使用JavaScript和CSS实现震动动画的例子，但由于Vue.js的事件处理机制不同，直接在Vue组件中添加eventListener会遇到问题。解决方案是将事件监听器转换为Vue的内联事件处理，并在适当的时候添加和移除CSS类来触发震动效果。

摘要由CSDN通过智能技术生成

我想在vue.js-应用程序中创建一个震动效果。我找到了一个例子，可以用JavaScript创建一个震动效果，但eventListener不能在vue中使用。js-所以我不知道如何在vue.js中使用此代码。

下面是我调整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./main.css">
    <title>3d Vector Kata</title>

    <style>
        /* Standard syntax */
        @keyframes shake {
            10%, 90% {
                transform: translate3d(-1px, 0, 0);
            }

            20%, 80% {
                transform: translate3d(2px, 0, 0);
            }

            30%, 50%, 70% {
                transform: translate3d(-4px, 0, 0);
            }

            40%, 60% {
                transform: translate3d(4px, 0, 0);
            }
        }

        .apply-shake {
            animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
        }

    </style>
</head>
<body>
<form id="test-form">
    <input type="text" id="test-input">
    <button type="submit" id="submit-button" onclick="shakeAnimation()">Submit</button>
</form>
<script src="./index.js"></script>
</body>
</html>

<script>
    const input = document.querySelector("input#test-input");
    const submit = document.querySelector("button#submit-button");

    submit.addEventListener("click", (e) => {
        e.preventDefault();
        if(input.value === "") {
            submit.classList.add("apply-shake");
        }
    });

    submit.addEventListener("animationend", (e) => {
        submit.classList.remove("apply-shake");
    });

</script>