vue中组件的过渡动画及实现代码

1.  和多个元素的过渡一样，用组件来替换transition中包裹的标签

 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 



 
 click me
 
  
  
 
 
 

2.  动态组件：component组件 :is 属性，来实现组件的过渡效果 

 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 



 
 click me
 
  
 
 
 

PS：下面看下Vue过渡动画实现

实现一个点击切换元素的隐藏和显示状态!

  
    
Hello World
  
  切换

需要把加入动画的元素放在transition组件内,定义一个按钮的切换方法

给不同状态下添加相应的样式

.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-to{
  color:#00BFFF;
  transition: opacity 3s;
}

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

动画过程中类名的变化

我们可以自定义类名,在元素属性中添加进入状态 enter-active-class,和离开状态leave-active-class

总结

以上所述是小编给大家介绍的vue中组件的过渡动画及实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！