vue.js - vue transition求解惑
本文介绍了vue.js - vue transition求解惑的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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 實現的話：
.drop-enter-active, .drop-leave-active {
transition: all 1s ease;
}
.drop-enter, .drop-leave-active {
opacity: 0;
}
<transition name="drop">
<div class='background' v-show='show'></div>
</transition>這樣就可以了，除非你還要用鉤子實現別的效果。
如果是想用 Javascript 的話...太長了我放 jsFiddle
这篇关于vue.js - vue transition求解惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
