Vue+animate在项目中做出过渡动画

2020-11-27 来源：爱问旅游网

这次给大家带来Vue+animate在项目中做出过渡动画，Vue+animate在项目中做出过渡动画的注意事项有哪些，下面就是实战案例，一起来看一下。

简介：

transition方法的使用
transition内置方法
transition-group

animate库实现过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="lib\vue.js"></script>
 <link rel="stylesheet" href="lib\animate.css" rel="external nofollow" >
 <style>
 [v-cloak] {
 display: none;
 }
 p {
 width: 100px;
 height: 100px;
 background: red;
 margin: 10px auto;
 }
 /* .fade-enter-active, .fade-leave-active {
 transition: 1s all ease;
 }
 .fade-enter-active {
 opacity: 1;
 width: 300px;
 height: 300px;
 }
 .fade-leave-active {
 opacity: 0;
 width: 100px;
 height: 100px;
 }
 .fade-enter, .fade-leave {
 width: 100px;
 height: 100px;
 opacity: 0;
 } */
 </style>
 <script>
 window.onload = function() {
 new Vue({
 el: '#box',
 data: {
 show: '',
 list: ['apple', 'banana', 'orange', 'pear']
 },
 computed: {
 lists: function() {
 var arr = [];
 this.list.forEach(function(val) {
 if (val.indexOf(this.show) != -1) {
 arr.push(val);
 }
 }.bind(this))
 return arr;
 }
 }
 })
 }
 </script>
</head>
<body>
 <p id="box" v-cloak>
 <input type="text" v-model="show">
 <!-- class定义 .fade
 .fade-enter{} 初始状态
 .fade-enter-active{} 进入过程
 .fade-leave{} 离开状态
 .fade-leave-active{} 离开过程
 -->
 <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
 <!-- 内置方法
 @before-enter = "beforeEnter"
 @enter = "enter"
 @after-enter = "afterEnter"
 @before-leave = "beforeLeave"
 @leave = "leave"
 @after-leave = "afterLeave"
 -->
 <!-- transition-group 多个元素运动，注意绑定key:1 -->
 <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
 {{val}}
 </p> 
 </transition-group>
 </p>
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

Vue+animate在项目中做出过渡动画