极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="test">
<button @click="show = !show">
Toggle
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:leave="leave"
>
<div v-show="show" ref="oDiv" style="width:200px;height:200px">
Demo
</div>
</transition>
</div>
<script>
new Vue({
el: '#test',
data: {
show: false
},
methods: {
beforeEnter(el) {
el.style.opacity = 0.6
el.style.transformOrigin = 'left'
el.style.transform = 'translate3d(2px, 4px, 0) scale(4)'
},
enter(el, done) {
this.$refs.oDiv.style.background = 'red'
this.$nextTick(() => {
el.style.opacity = 1
el.style.transition = 'all 10.4s'
el.style.transform = 'translate3d(0, 0, 0) scale(1)'
})
el.addEventListener('transitionend', done)
},
afterEnter(el) {
this.$refs.oDiv.style.transition = ''
},
leave(el, done) {
// 这句如果加的话就有动画了
// this.$refs.oDiv.style.width = '200px'
}
</script>
</body>
</html>比如这样，我的理解是beforeEnter相当于过渡类名中的v-enter，enter相当于v-enter-active, 还有就是leave这个hook，这样加动画却是可行的，而在enter里像leave这样写结果却不是渐变的效果，请问这是什么原因，谢谢!