Vue实战项目开发--Vue中的动画特效

项目的源代码在GitHub上:点击查看

目录

vue中的css动画原理

在Vue中使用Animate.css库

在Vue中同时使用过渡属性和动画

Vue中的Js动画与Velocity.js的结合

Vue中多个元素或组件的过渡

vue中的列表过渡

vue中的动画封装

vue中的动画特效--总结


vue中的css动画原理

需要实现动画效果的标签需要包裹

Vue实战项目开发--Vue中的动画特效_第1张图片

Vue实战项目开发--Vue中的动画特效_第2张图片




    
    Vue中的CSS动画原理
    
    



    
hello world

注意:这里的v-if也可以用v-show代替。vue的动画效果的原理是CSSs中的transition属性

还有就是没有设置name属性,那么默认为v-enter、v-enter-activev-leave、v-leave-to

在Vue中使用Animate.css库

 

  • 必须使用class自定义名字的方式(enter-active-class="animated swing",必须添加animated,然后第二个参数是动画效果的名字),来使用animate.css库
  • 必须引入animate.css库文件(下载地址:animate.css库文件地址)



    
    在Vue中的使用animate.css库
    
    
    



    
hello world

在Vue中同时使用过渡属性和动画

  • 通过appear实现页面的初次动画
  • 如何既使用animate.css的动画也使用transition过渡(文档:transition的使用)
  • 当两个动画同时使用时以谁的动画时间为准,定义type来确定;除此还可以自定义动画时长

   注意:不明白怎么使用的,一定要看文档




    
    在Vue中同时使用过渡属性和动画
    
    
    
    



    
hello world

Vue中的Js动画与Velocity.js的结合




    
    Vue中的JS动画与velocity.js
    
    



    
hello world
  • 使用vue中的js钩子来实现js动画效果(js钩子:JavaScript钩子)
  • velocity.js动画库实现动画效果(官网:velocity.js)

其中:before-enter、enter、after-enter就是vue中的js钩子,查看更多就点击上面链接

注意:不明白怎么使用的,一定要看文档

Vue中多个元素或组件的过渡




    
    Vue中多个元素或组件的过渡
    
    



    
//多个元素的动画过渡
hello world
Bye World
//多个组件的动画过渡
  • 多个元素的动画过渡:这里使用的是默认的过渡类名,也可以在transition上添加name属性(文档:单元素/组件的过渡)
  • 多个组件的动画过渡:这里使用的是component标签和 :is插槽的用法(文档:内置的组件-component)

注意:不明白怎么使用的,一定要看文档

vue中的列表过渡




    
    Vue中的列表过渡
    
    



    
{{item.title}}
  • 使用transition-group来包裹列表,相当于在每个div上都加上了一个transition(文档:transition-group)
  • 循环列表的key最好不使用index

注意:不明白怎么使用的,一定要看文档

vue中的动画封装




    
    Vue中的CSS动画原理
    
    
    



    
hello world

hello world

  • 有两种封装动画效果的方法:css动画和js动画,推荐使用js动画,这样可以把动画效果封装成一个组件,不需要全局定义css样式

vue中的动画特效--总结

  • 这里把vue文档的进入/离开 & 列表过渡讲完啦(文档:进入/离开 & 列表过渡)
  • 还有两个地方没有讲,动态过渡和状态过渡(有需要的自己查看文档)

你可能感兴趣的