账号密码登录
微信安全登录
微信扫描二维码登录

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于vue中钩子函数实现动画效果
    • 昵称过于强大无法显示2020-01-01 00:00
    15
    0

    <body>

    <div id="app">
        <input type="button" value="加入购物车" @click="flag=!flag">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    
    <script>
        // 半场动画的最佳实践
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                beforeEnter(el) {  // 设置小球的位置
                    el.style.transform = 'translate(0, 0)'
                },
                enter(el, done) {
                    el.offsetWidth
                    el.style.transform = 'translate(100px, 200px)'
                    el.style.transition = 'all 0.5s ease'
                    done()
                },
                afterEnter(el) {
                    // this.flag = this.flag
                }
            }
        });
    </script>

    </body>
    为啥“enter(el, done)”函数中需要写el.offsetWidth,如果不写,过渡效果就没法实现?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部