如何用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回答
-
你这么写不行吗
132021-03-26 -
千修罗
2019-04-04
handleEnter里应该还可以这样实现css中的transition: opacity 1s :
Velocity(el,{opacity:1},{duration:1000,complete:done})
10
相似问题