1、動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn鏡像快速導入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!--v-enter，是進入之前，元素起始狀態 -->
<style>
/*v-enter，是進入之前，元素起始狀態*/
/*v-leave-to，是動畫離開之后的終止狀態，*/
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(80px);
}
/*v-enter-active :入場的動畫時間段*/
/*v-leave-active :離場的動畫時間段*/
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease;
}
/*自定義前綴*/
.my-enter,
.my-leave-to{
opacity:0;
transform: translateY(80px);
}
/*v-enter-active :入場的動畫時間段*/
/*v-leave-active :離場的動畫時間段*/
.my-enter-active,
.my-leave-active{
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<!--插值表達式-->
<input type="button" value="toggle" @click="flag=!flag"></input>
<!--使用transition元素，把需要被動畫控制的元素包裹起來，它是Vue官方提供的 -->
<transition>
<h1 v-if="flag">{{msg}}</h1>
</transition>
<!--自定義前綴-->
<!--插值表達式-->
<input type="button" value="toggle" @click="flag=!flag"></input>
<!--使用transition元素，把需要被動畫控制的元素包裹起來，它是Vue官方提供的 -->
<transition name="my">
<h6 v-if="flag">{{msg}}</h6>
</transition>
</div>
<script>
//2.創建一個vue實例
var vm = new Vue({
el: '#app', //表示當前我們new的這個Vue實例，要控制頁面上的哪個區域
data: { //data屬性中存放的是el中要用到的數據
flag:false,
msg: '歡迎學習Vue' //通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序
}
})
</script>
</body>
</html>
2、animate第三方插件動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn鏡像快速導入Vue包-->
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--cdn鏡像快速導入Vue包-->
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表達式-->
<input type="button" value="toggle" @click="flag=!flag"></input>
<!--使用transition元素，把需要被動畫控制的元素包裹起來，它是Vue官方提供的 -->
<!-- 使用animated第三方庫，制作動畫-->
<!-- :duration="毫秒值" 來統一設置入場和離場時候的動畫時長-->
<!-- :duration="{enter:200,leave=400}" 來統一設置入場和離場時候的動畫時長-->
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="800">
<h1 v-if="flag" class="animated">{{msg}}</h1>
</transition>
</div>
<script>
//2.創建一個vue實例
var vm = new Vue({
el: '#app', //表示當前我們new的這個Vue實例，要控制頁面上的哪個區域
data: { //data屬性中存放的是el中要用到的數據
flag:false,
msg: '歡迎學習Vue' //通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序
}
})
</script>
</body>
</html>