如何用JS代码封装来实现transition过渡效果

来源:5-7 Vue中的动画封装

twoheart

2018-10-22

 Vue.component('fade', {
            props: ['show'],
            template: `
            <transition @before-enter="handleBeforeEnter" @enter="handleEnter">
                <slot v-if="show"></slot>
            </transition>
            `,
            methods: {
                handleBeforeEnter: function(el) {
                    el.style.opacity = 0
                },
                handleEnter: function(el, done) {
                    setTimeout(function() {
                        el.style.transition = 'all 1s'
                        el.style.opacity = 1
                        done()
                    }, 1000)
                }
            }
        })

按照之前上课用过的动画钩子怎么样实现本节课一开始的过渡效果呢?
handleEnter 里怎么实现 css 中的 transition: opacity 1s

写回答

2回答

Dell

2018-10-22

你这么写不行吗

1
3
qq_吃不吃_03663857
回复
千修罗
隐藏的时候现在是没有渐隐的动画,要怎么写呢
2021-03-26
共3条回复

千修罗

2019-04-04

handleEnter里应该还可以这样实现css中的transition: opacity 1s :

Velocity(el,{opacity:1},{duration:1000,complete:done})


1
0

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程