您现在的位置:首页 >> 前端 >> 内容

vue基础学习之transition组件

时间:2018/5/9 16:35:28 点击:

  核心提示:transition name=fadep v-show=show/p//运动东西(元素,属性,路由)/transitionclass定义: .fade-enter{} //初始状态 .fade-en...

transition name="fade">  

     <p v-show="show"></p>  

     //运动东西(元素,属性,路由)  

</transition>  

 class定义:  

   .fade-enter{}   //初始状态  

   .fade-enter-active {} //变化成什么样->当元素显示出来  

   .fade-leave{}  

   .fade-leave-active{}  //变成什么样->当元素离开  

<transition></transition>组件里面的事件: 

@before-enter  动画进入之前

@enter 动画进入

@after-enter  动画进入之后

@before-leave 动画离开之前

@leave 动画离开

@after-leave  动画离开之后

如何配合animate.css使用

  1 引入animate.css

  2  需注意:animated 配合

[html] view plain copy

enter-active-class="bounceInLeft" leave-active-class="bounceOutRig”使用  eg:  

[html] view plain copy

<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">  

          <p v-show="show" class="animated"></p>  

</transition>  

<transition></transition>只能让一组元素去运动,如果用多组元素用<transiton-group></transition-group>。

Tags:VU UE E基 基础 
作者:网络 来源:hx_1199的博客