提交
1、vue.js中的元素动画或页面跳转动画有多种实现方式比如：
1、自己手动写css3动画来实现
2、使用第三方css动画库如：Animate.css
3、在构子函数中操作DOM
4、使用第三方js动画库如：Velocity.js
2、vue.js官方提供了默认的动画组件 transition ，例子：
<div id="demo">
<button @click='show=!show'>切换</button>
<transition name='fade'> //将需要执行动画的元素包裹在transition标签中，并制定动画名称
<p v-if='show'>Hello</p>
</transition>
</div>
new Vue({
el:'demo',
data:{
show:true
}
})
.fade-enter-active,.fade-leave-active{
transition:opacity .5s
}
.fade-enter,.fade-leave-to{
opacity:0
}
transition执行：目标元素是否应用CSS过渡或动画(增删类名)-->调用构子函数3、transition过渡的类名
状态A-->状态B
v-enter:元素初始状态
v-enter-to:动画结束后状态
v-enter-active:动画过渡过程，用来定义动画时间、延迟、曲线函数
状态B-->状态A
v-leave:返回动画执行前状态
v-leave-to:返回动画执行后状态
v-leave-active:返回动画过渡过程，用来定义动画时间、延迟、曲线函数
见官网图如下：（ V 代表动画的类名）4、使用CSS动画
<div id='demo'>
<button @click='show=!show'>切换</button>
<transition name='bounce'>
<p v-show='show'>Hello</p>
</transition>
</div>
new Vue({
el:'#demo',
data:{
show:true
}
})
.bounce-enter-active{
animation:bounce-in .5s;
}
.bounce-leave-active{
animation:bounce-in .5s reverse;
}
@keyframes bounce{
0%{
transform:scale(0)
}
50%{
transform:scale(1.5)
}
100%{
transform:scale(1)
}
}5、使用第三方CSS动画库 Animate.css
通过以下特性自定义过渡类名(可结合第三方CSS库)：
enter-class
enter-to-class
enter-active-class
leave-active
leave-to-class
leave-active-class
<div id='demo'>
<button @click='show=!show'>切换</button>
<transition name='custom-classes-trandition' enter-active-class='animated tada' leave-active-class='animated bounceOutRight'>
<p>Hello</p>
</transition>
</div>
new Vue({
el:'demo',
data:{
show:true
}
})6、动画过渡时间
<transition :duration="1000">...</transition> //设置1000毫秒时间
<transition :duration="{enter:500,leave:800}">...</transition> //设置进入时间和回退时间7、Vue.js的JavaScript动画构子函数
<transition @before-enter='beforeEnter'
@enter='enter'
@after-enter='afterEnter'
@enter-cancelled='enterCancelled'
@before-leave='beforeLeave'
@leave='leave'
@after-leave='afterLeave'
@leave-cancelled='leaveCancelled'
:css='false' >
</transition>
//对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测
methods:{
beforeEnter:function(el){},
enter:function(el,done){
done(); //当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调
},
afterEnter:function(el){},
enterCancelled:function(el){},
beforeLeave:function(el){},
leave:function(el){
done();
},
afterLeave:function(el){},
leaveCancelled:function(el){}
}
//钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用8、使用第三方JavaScript动画库Velocity.js
<div id="demo">
<button @click="show = !show">切换</button>
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false" >
<p v-if="show">Hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})9、通过 appear 特性设置节点在初始渲染的过渡
<transition appear> </transition>
自定义过渡类名：
<transition appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class">
</transition>
自定义JavaScript构子：
<transition appear
@before-appear='BeforeAppearHook'
@appear='AppearHook'
@after-appear='AfterAppearHook'
@appear-cancelled='AppearCancelledHook'>
</transition>10、多个元素的过渡（使用key）
<transition>
<button :key="docState">
{{ buttonMessage }}
</button>
</transition>
computed: {
buttonMessage: function () {
switch (this.docState) {
case 'saved': return '编辑'
case 'edited': return '保存'
case 'editing': return '取消'
}
}
}
过渡模式
out-in 当前元素先进行过渡，完成之后新元素过渡进入
in-out 新元素先进行过渡，完成之后当前元素过渡离开
<transition name="fade" mode="out-in"> </transition>11、多个组件的过渡（使用动态组件）
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el:'demo',
data:{
view:'v-a'
},
components:{
'v-a':{
template:`<div>组件A</div>`
},
'v-b':{
template:`<div>组件B</div>`
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
opacity: 0;
}12、<transition-group> 组件实现列表的过渡
<transition-group>组件会渲染成<span>标签，可通过 tag 特性更换为其他元素。
目标元素必须提供唯一的 key 值
<div id='demo'>
<button @click='add'>添加</button>
<button @click='remove'>删除</button>
<button @click='shuffle'>打乱</button>
<transition-group name='list' tag='div'>
<span v-for='item in items' :key='item' class='list-item'>
{{item}}
</span>
</transition-group>
</div>
//_.shuffl(arr) 随机打乱数组，并返回被打乱的数组
//arr.splice(index,0,item) 在index位置添加一个 item 元素
//arr.splice(index,1) 在index位置删除1个元素
new Vue({
el:'demo',
data:{
items:[1,2,3,4,5,6,7,8,9],
nextNum:10
},
methods:{
randomIndex:function(){ //返回1~9之间的随机数
return Math.floor(Math.random()*this.items.length)
},
add:function(){
this.items.splice(this.randomIndex,0,nextNum++); //在随机的位置添加一个数
},
remove:function(){
this.items.splice(this.randomIndex,1); //在随机的位置删除一个数
},
shuffle:function(){
this.items=_.shuffle(this.items); //返回顺序被打乱的数组
}
}
})
.list-item{
transition:all 1s;
display:inline-block;
margin-right:10px;
}
.list-leave-active {
position: absolute;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
13、与JavaScript交互实现交错过渡（Velocity.js）
<div id='demo'>
<input v-model='query'> //根据用户输入筛选显示列表中符合项+动画
<transition-group name='fade' tag='ul' :css='false' @before-enter='beforeEnter' @enter='enter' @leave='leave'>
<li v-for='(item,index) in items' :key='item.msg' :data-index='index'>
{{item.msg}}
</li>
</transition-group>
</div>
new Vue({
el:'#demo',
data:{
query:'',
list:[
{msg:'then'},
{msg:'reject'},
{msg:'undefiend'},
{msg:'resolve'}
]
},
computed:{
showList:function(){
var vm=this;
return this.list.filter(function(item){
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !==-1
})
}
},
methods:{
beforeEnter:function(el){
el.style.opacity=0;
el.style.height=0;
},
enter:function(el,done){
var delay=el.dataset.index*150;
setTimeout(function(){
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave:function(el,done){
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})14、创建可复用的过渡
//任务：只需将需要实现动画的元素或列表放入该过渡组件中即可实现相应的动画
方式一：
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
函数组件更适合完成这个任务：
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})15、动态过渡（根据组件的状态设置不同的过渡动画）
数据。这意味着，可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果
//最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。" title="" data-original-title="复制">
<transition :name="transitionName"> </transition>
//通过事件的钩子函数方法，可以在获取到相应上下文数据。这意味着，可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果
//最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。
来源：https://segmentfault.com/a/1190000016366877
CSS3的变形、过渡、动画、关联属性
transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix；transition-property：过度的属性；animation-name：动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
css transition 实现滑入滑出
transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。
vue 项目如何使用animate.css
页面使用类名（animated ）需要和引入的名称相同，bounceInLeft是需要的动画效果，如果完成前三部还是没有效果，可能就是animate.css版本的问题了，直接安装的都是最新版本，而vue官网引入的是3.5.1版本。更换一下版本：
前端动画必知必会：React 和 Vue 都在用的 FLIP 思想实战
拿到了这个需求，第一直觉是怎么做？假设第一行第一个图片移动到了第二行第三列，是不是要计算出第一行的高度，再计算出第二行前两个元素的宽度，然后从初始的坐标点通过 CSS 或者一些动画 API 移动过去？
css动画
我们眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。
css3中动画有哪些属性？
通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。动画是使元素从一种样式逐渐变化为另一种样式的效果。那么在CSS中动画属性有哪些？
12款优秀的 jQuery 动画库
Textillate.js 是一个简单的 CSS3 文本动画插件。结合了一些非常棒的库，把 CSS3 动画轻松应用到任何文本；Lazy Line Painter 这款 jQuery 插件使用 Raphaël 库来创建路径动画 CSS3
Flutter实现抽屉动画效果
这篇会深化View拖拽实例，利用Flutter Animation、插值器以及AnimatedBuilder教大家实现带动画的抽屉效果。通过构思，我们可以设想到实现抽屉的方式就是用Stack控件将两个Widget叠加显示，用GestureDetector监听手势滑动
css3 过渡和动画
在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果
js触发css动画，可以重复触发
写好动画，但不在需要动画的元素上绑定animation属性，事件触发的时候绑上，事件结束后再删除掉，下次点击就能重新绑上，重现动画效果；CSS代码：写好动画效果（闪烁）
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!