极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src='https://cn.vuejs.org/js/vue.js'></script>
<style type="text/css" media="screen">
.background {
background: #000;
width: 100px;
height: 100px;
}
.background.drop-enter {
-webkit-transition: all 10s ease;
transition: all 10s ease;
}
.background.drop-enter-active {
-webkit-transition: all 10s ease;
transition: all 10s ease;
}
</style>
</head>
<body>
<div id="app">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter= "afterEnter"
name="drop"
>
<div class='background' v-show='show'></div>
</transition>
<button type="button" value="点击" @click='fns'>点击</button>
</div>
<script type="text/javascript">
new Vue({
data : {
show : false
},
methods: {
fns: function() {
this.show = !this.show;
},
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el,done) {
el.style.opacity = 0;
done();
},
afterEnter(el) {
}
}
}).$mount('#app')
</script>
</body>
</html>今天一天被vue2 的transition整蒙了，求大神指导。。。。如何在用transition的勾子函数时也可以出现动画效果。。。。。谢谢！！！！！！！！
嗯...這應該是理解錯誤了，其實
transition這些方法並不是拿來取代css部分的transition。這些函數主要是做用在
利用 javscript 實作動畫效果這種事情上，就例如官方文檔中利用Velocity庫來實現一些效果。只是因為這不管是
CSS動畫還是Javascript動畫都是屬於過渡動畫(Transition)，才放在一起使用。看代碼應該是想要實現
fade效果，如果是要用CSS實現的話：這樣就可以了，除非你還要用鉤子實現別的效果。
如果是想用
Javascript的話...太長了我放 jsFiddle