vue动画 css (animate.css) js(velocity.js)
1、动画实现的方式： ------动画在vue上的应用，实现过渡效果
（1）css3：transition、 animation、animate.css（框架）
（2）js：jQuery、$animation({},{}) （框架）；velocity 、 Velocity(el,{},{}) （框架）
（1）使用css3技术实现：
- 原生css3：<transition>在渲染完毕之后是不存在的，div中会由vue添加一些样式
自定义过渡样式：通过transition组件，可以给任何元素和组件添加过渡；
条件渲染（使用v-if）、条件展示（使用v-show）、动态组件、组件根节点过渡类名
.v-enter（开始进入）
.v-enter-to（进入结束）
.v-enter-active（.v-enter到.v-enter-to的整个过程）
.v-leave（开始出去）
.v-leave-to（出去结束）
.v-leave-active（.v-leave到.v-leave-to的整个过程）
<script src="../js/vue.js"></script>
<style>
/* 过程 */
.v-enter-active,.v-leave-active{
transition: opacity 2s;
}
/*进入结束 开始出去 */
.v-enter-to,.v-leave{
opacity: 1;
}
/*开始进入 出去结束*/
.v-enter,.v-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click='show = !show'>切换</button>
<!--使用tansition组件进行过渡变换 -->
（1）方法1：
<transition>
<div v-show='show'>
<h2>css3动画</h2>
<p>这是一个动画</p>
</div>
</transition>
（2）方法2：
<div is=’transition’>
<div v-show='show'>
<h2>css3动画</h2>
<p>这是一个动画</p>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true,
}
})
</script>
- 自定义过渡的类名：优先级高于普通的类名，这对于Vue的过度系统和其他第三方CSS动画库，如Animate.css结合使用十分有用。
框架 animate.css ：官网https://daneden.github.io/animate.css/
进入：enter-class enter-to-class enter-active-class
离开：leave-class leave-active-class leave-to-class
<script src="../js/vue.js"></script>
<!--引入animate框架 -->
<link rel="stylesheet" href="../css/animate.css">
</head>
<body>
<div id="app">
<button @click='show = !show'>切换</button>
<!--使用tansition组件进行过渡变换 两个参数 -->
<transition enter-active-class='animated bounce'
leave-active-class='animated rollOut'>
<div v-show='show'>
<h2>css3动画</h2>
<p>这是一个动画</p>
</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true,
}
})
</script>
（2）使用JS技术实现（使用事件钩子实现动画（<transition>））
- 引入jQuery方法（animate）：
before-enter、enter、after-enter
before-leave 、leave、after-leave
- 引入动画库velocity.min.js和插件velocity.ui.js：效率比animate.css、css3和jQuery高
enter:function(el,done){
$(el).animate({},{})
//velocity
Velocity(el,{},{})
//velocity.ui
Velocity(el,'',{})
}
1、引入jQuery方法：
<script src="../js/vue.js"></script>
<!--引入animate框架 -->
<script src="../js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="app">
<button @click='show = !show'>切换</button>
<!--使用js技术实现动画 -->
<transition @enter='enter' @leave='leave'> <!--绑定动画 -->
<div v-show='show'>
<h2>css3动画</h2>
<p>这是一个动画</p>
</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true,
},
// 操作动画事件
methods:{
enter:function(el,done){
// el:当前dom，done：回调函数（当动画结束后执行
// 不能直接选取dom，因为经过vue加工后的dom位置不确定
$(el).animate({
opacity:1 //参数1：加样式
},{
duration:1000, //参数2：样式持续的时间
complete:done
})
},
leave:function(el,done){
$(el).animate({
opacity:0 //参数1：加样式
},{
duration:1000, //参数2：样式持续的时间
complete:done
})
}
}
})
</script>
2、 引入velocity.min.js和velocity.ui.js
<script src="../js/vue.js"></script>
<!--引入velocity组件 -->
<script src="../js/velocity.min.js"></script>
<script src="../js/velocity.ui.js"></script>
</head>
<body>
<div id="app">
<button @click='show = !show'>切换</button>
<!--使用js技术实现动画 -->
<transition @enter='enter' @leave='leave'> <!--绑定动画 -->
<div v-show='show'>
<h2>css3动画</h2>
<p>这是一个动画</p>
</div>
</transition>
</div>
<script>
new Vue({
el:'#app',
data:{
show:true,
},
// 操作动画事件
methods:{
enter:function(el,done){
// el:当前dom，done：回调函数（当动画结束后执行
// 不能直接选取dom，因为经过vue加工后的dom位置不确定
Velocity(el,"callout.bounce",{
//参数1：当前dom;参数2：样式（使用velocity的样式，不要自己写）
duration:1000, //参数3：样式持续的时间
complete:done
})
},
leave:function(el,done){
Velocity(el,"callout.swing",{
duration:1000, //参数3：样式持续的时间
complete:done
})
}
}
})
</script>
（3）多个元素的渲染效果（使用<transition-group>组件）：不同于<transition>，它会以一个真实元素呈现：默认为一个<span>；通过tag特性更换为其他元素；内部元素总是需要提供唯一 key属性值（看下面的学生管理系统的例子）
<script src="../js/velocity.min.js"></script>
<script src="../js/velocity.ui.js"></script>
1）方法1：默认转换为一个span标签，tag将其最终渲染成ul标签
< transition-group tag=’ul’ @enter=’enter’ @leave=’leave’>
<li v-for=’item in nameList’ :key=’item.name’>{{item.name}}</li>
</transition>
2）方法2：这里不能使用<transition>标签，因为是在table里不能没有<tbody>
<tbody is= transition-group tag=’tbody’ @enter=’enter’ @leave=’leave’>
<tr v-for=’item in studentList’ :key=’item.id’>
<td>
</td>
</tr>
</tbody>
学生管理系统：（第二版：有模糊查询+离开进入的动画）
<!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="../js/vue.js"></script>
<script src="../js/velocity.min.js"></script>
<script src="../js/velocity.ui.js"></script>
</head>
<body>
<div id="app">
<table>
<h3>{{title}}</h3>
<hr>
<!--进行双向数据绑定 -->
<input type="search" placeholder="请输入关键字" v-model='keywords'>
<thead>
<tr>
<th>选项</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!--多元素渲染效果：这里不能使用<transition>标签，因为是在table里不能没有<tbody> -->
<tbody is='transition-group' tag='tbody' @enter='enter' @leave='leave'>
<!--该填为筛选之后的学生列表 key唯一指定id属性-->
<tr v-for='item in studentList' :key='item.id'>
<td><input type="checkbox" :value='item.id'> </td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</tbody>
</table>
<div>
<button>添加</button>
<button>删除</button>
<button>修改</button>
</div>
</div>
<script>
var app=new Vue({
el:'#app',
methods:{
// 使用velocity添加元素离开的和进来的动画：
enter:function(el,done){ //此参数必须传入
Velocity(el,'transition.bounceLeftIn',{
computed:done,
duration:1000
})
},
leave:function(el,done){
Velocity(el,'transition.bounceLeftOut',{
computed:done,
duration:1000
})
}
},
computed:{
studentList:function(){ //筛选学生，实现模糊查询
var vm =this;//this指向vue对象,做一个跳板
return this.students.filter(function(item){
// return true; //还是返回整个学生列表
// console.log(this)//指向window
return item.name.indexOf(vm.keywords) !== -1;
//按名字进行模糊查询，找不到相应值返回-1
});
}
},
data:{
keywords:'', //实现双向数据绑定
title:'学生信息管理系统', //实现文本的渲染
students:[{ //模拟数据
id:1,
name:'tom',
age:12,
gender:'男',
},{
id:2,
name:'lili',
age:13,
gender:'男',
},{
id:3,
name:'jecky',
age:12,
gender:'男',
},{
id:4,
name:'lucy',
age:12,
gender:'女',
},{
id:5,
name:'nana',
age:12,
gender:'女',
}]
}
})
</script>
</body>
</html>