- 過渡示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.show-enter-active, .show-leave-active{
transition: all .6s linear
}
.show-enter, .show-leave-to{
opacity: 0
}
</style>
</head>
<body>
<div id = "app">
<button @click="show = !show">按鈕</button>
<transition name="show">
<p v-show="show">test</p>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
show:true
}
})
</script>
</body>
</html>
![image]()
- 動畫示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.show-enter-active{
animation: bounse-in 0.5s
}
.show-leave-active{
animation: bounse-in 0.5s reverse
}
@keyframes bounse-in {
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div id = "app">
<button @click="show = !show">按鈕</button>
<transition name="show">
<p v-show="show" style="text-align: center">testtesttesttesttesttesttesttesttesttest</p>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
show:true
}
})
</script>
</body>
</html>
- 用三方的動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">點我</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">菜鳥教程 -- 學的不僅是技術，更是夢想！！！</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
</body>
</html>
