首页 > 建站教程 > JS、jQ、TS >  vue过渡和animate.css结合使用详解_vue.js正文

vue过渡和animate.css结合使用详解_vue.js

今天学习了vue过渡和animate.css结合使用,所以,添加一点小笔记。

01<!DOCTYPE html>
02<html lang="en">
03<head>
04  <meta charset="UTF-8">
05  <title>动画</title>
06  <script type="text/javascript" src="vue.js"></script>
07  <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
08  <style type="text/css">
09    p {
10      width: 300px;
11      height: 300px;
12      background: red;
13      margin: 10px auto;
14    }
15  </style>
16  <script type="text/javascript">
17    window.onload = function(){
18      var app = new Vue({
19        el:'#box',
20        data:{
21          show:false
22        }
23      })
24    }
25  </script>
26</head>
27<body>
28  <div id="box">
29    <!-- 控制数据的值切换显示隐藏 -->
30    <button @click="show=!show">transition</button>
31     
32    <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
33      <p v-show="show" class="animated"></p>
34    </transition> -->
35 
36    <!-- 第二种方法 -->
37    <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
38      <p v-show="show"></p>
39    </transition> -->
40 
41    <!-- 多元素运动 -->
42    <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
43      <p v-show="show" class="animated" :key="1"></p>
44      <p v-show="show" class="animated" :key="2"></p>
45    </transition-group>
46  </div>
47</body>
48</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。