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

Question

 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 ？

Answer 1

Dell 2018-10-22 22:25:09

你这么写不行吗

• 提问者 twoheart #1

  神奇了，今天试了下居然可以了，谢谢老师

• 千修罗 回复 提问者 twoheart #2

  handleEnter里应该还可以这样实现css中的transition: opacity 1s :
  
  Velocity(el,{opacity:1},{duration:1000,complete:done})

• qq_吃不吃_03663857 回复 千修罗 #3

  隐藏的时候现在是没有渐隐的动画，要怎么写呢

Answer 2

千修罗 2019-04-04 10:38:08

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

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