账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    vue怎么实现重复动画
    65
    0

    我做出了一次性的动效，没有办法在变回来循环使用，看了vue官方文档，没找到我想要的方法，

    <!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">
    <title>Document</title>
    <style>
        @keyframes one {
            0% {
                width: 100px;
                background: red;
            }

            100% {
                width: 0px;
                background: red;
            }
        }

        @keyframes two {
            0% {
                width: 100px;
                background: red;
            }

            100% {
                width: 100px;
                background: red;
                -webkit-transform: rotate(135deg);
            }
        }

        @keyframes three {
            0% {
                width: 100px;
                background: red;
            }

            100% {
                width: 100px;
                background: red;
                transform: rotate(45deg) translate(-28px,-28px);
                /* -webkit-transform-origin: center; */
                /* -webkit-transform: translate(50px,100px); */
            }
        }

        .line {
            margin-top: 20px;
            width: 100px;
            height: 20px;
            background: red;
            color: #fff;
            border-radius: 8px;
        }



        .box {
            display: flex;
            flex-direction: column;
            width:100px;
        }

        .one {
            animation: one 1s ease .1s forwards;
        }

        .two {
            animation: two 1s ease .1s forwards;
        }

        .three {
            animation: three 1s ease .1s forwards;
        }
    </style>
</head>

<body>
    <div name="close" class="box" @click="change">
        <div :class="line1"></div>
        <div :class="line2"></div>
        <div :class="line3"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '.box',
            data: {
                line1: 'line',
                line2: 'line',
                line3: 'line',
            },
            methods: {
                change() {
                    this.line1 = 'line one';
                    this.line2 = 'line two';
                    this.line3 = 'line three';
                }
            }
        })
    </script>
</body>

</html>

    怎么用
    v-enter
    v-enter-active
    v-enter-to
    v-leave
    v-leave-active
    v-leave-to
    实现

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 思念說給風聽 普通会员 1楼

      在Vue中，你可以使用useEffect钩子来实现重复动画。useEffect钩子在组件挂载时被调用，该钩子会监听特定的事件，并在事件发生时执行一些额外的代码。

      以下是一个简单的例子，展示了如何使用useEffect钩子来实现重复动画：

      ```vue

      ```

      在这个例子中，我们有两个<div>元素，它们都有一个v-if指令，这个指令告诉Vue这两个元素是否应该显示。当我们改变计数器的值时，Vue会重新渲染这两个元素，从而实现重复动画的效果。

      请注意，useEffect钩子会立即执行，所以如果需要在某个特定的时间点执行动画，你可能需要使用setTimeout或requestAnimationFrame来延迟执行动画。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部