vue过渡动画和使用animate.css

2021-11-11 11:00:01 阅读：208 来源： 互联网

标签：function el vue transition done 过渡 enter animate css

通过transition标签包裹实现

一个transition中只能放一个过渡元素(多个过渡元素只有第一个生效)
让进入页面就执行过渡效果,给transition标签添加appear属性

1.过渡的类名

单一过渡实现

在这里插入图片描述

<button v-on:click = "show = !show">点我</button>
<transition appear>
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
    
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

多个不同的过渡

给transition添加name属性
过渡类名中的v换成name的属性值

<button v-on:click = "show = !show">点我</button>
<transition name = "fade" appear>
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
    
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

2.通过JavaScript 钩子实现过渡动画

注意执行done(),否则后面的after钩子函数不执行
如果刚打开页面就执行动画, done() 需要延时执行
如果使用钩子函数,需要给transition添加v-bind:css=“false”,否则他会去查找过渡的几个类名
**在动画执行过程中必须写上 el.offsetWidth或者el.offserHeigh **

<button v-on:click = "show = !show">点我</button>
<transition  appear 
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter">
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>

methods:{
  beforeEnter: function (el) {
    
  },
  enter: function (el, done) {
    el.style.transition:"all 3s"
    el.offserHeight
    done()
  },
  afterEnter: function (el) {
    el.style.maginLeft = "500px"
  },
}

使用velocity实现过渡动画(JavaScript 钩子实现)

导入velocity文件

<button v-on:click = "show = !show">点我</button>
<transition  appear 
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter">
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>

methods:{
  beforeEnter: function (el) {
    
  },
  enter: function (el, done) {
    Velocity(el,{opcity:1,marginLeft:'500px'},3000)
    done()
  },
  afterEnter: function (el) {
    
  },
}

3. 使用自定义class名实现过渡动画(可以通过这种方式使用animate.css库)

导入animate.css文件

<button v-on:click = "show = !show">点我</button>
<transition  appear 
  enter-class=""
  enter-active-class="animated bounceOutRight"
  enter-to-class="">
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>

标签：function,el,vue,transition,done,过渡,enter,animate,css
来源： https://blog.csdn.net/MATLAb1234000/article/details/121262935

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9