1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <!--1.导入Vue的包-->
10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
12 <!-- 入场 bounceIn 离场bounceOut -->
13 </head>
14
15 <body>
16 <div id="app">
17 <input type="button" value="toggle" @click="flag=!flag">
18 <!-- 需求：点击按钮，让h3显示，再点击，让h3隐藏 -->
19 <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
20 <h3 v-if="flag">这是一个H3</h3>
21 </transition> -->
22
23 <!-- 使用 :duration="毫秒值" 来统一设置入场和离场时候的动画时长 -->
24 <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
25 <h3 v-if="flag" class="animated">这是一个H3</h3>
26 </transition> -->
27
28 <!-- 使用 :duration="{ enter:200,leave:400}" 来分别设置 入场的时长和离场的时长 -->
29 <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter:200,leave:400}">
30 <h3 v-if="flag" class="animated">这是一个H3</h3>
31 </transition>
32
33 </div>
34
35
36 <script>
37 //创建 Vue 实例，得到 ViewModel
38 var vm = new Vue({
39 el:'#app',
40 data:{
41 flag:false
42 },
43 methods:{}
44 });
45 </script>
46 </body>
47 </html>
浙公网安备 33010602011771号