VUE动画

发布时间:2024-09-11 13:01

vue动画的声明周期

VUE动画_第1张图片

步骤

  • 使用 transition 元素,把需要被动画控制的元素,包裹起来;
  • 自定义两组样式,来控制 transition 内部的元素实现动画。



  
  
  
  Document
  
  



  

这是一个H3

自定义动画,修改v前缀

在需要自定的动画的元素添加一个name属性
样式设置v-改为name属性值-





  
  
  
  Document
  
  



  

这是一个H3


这是一个H6

使用动画钩子函数

定义 transition 组件以及三个钩子函数:

OK

定义三个 methods 钩子方法:

methods: {
        beforeEnter(el) { // 动画进入之前的回调
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调
          this.isshow = !this.isshow;
        }
      }

定义动画过渡时长和样式:

.show{
      transition: all 0.4s ease;
    }

案例:添加进购物车动画





  
  
  
  Document
  
  



  

v-for列表动画

  • 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
  • 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性
  • 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签



  
  
  
  Document
  
  


  
  • {{item.id}} --- {{item.name}}
  • 列表的排序过渡:

    组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性,它会在元素的改变定位的过程中应用。
    v-move 和 v-leave-active 结合使用,能够让列表的过渡更加平缓柔和:

    .v-move{
      transition: all 0.8s ease;
    }
    .v-leave-active{
      position: absolute;
    }
    

    appear

    给 ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果,也就是设置节点的在初始渲染的过渡

     
            
  • {{item.id}} --- {{item.name}}
  • 使用CSS库

    通过自定义过度类名可以有效结合Animate.css这类动画库制作更精美的动画效果。
    步骤:
    (1)引入animate.css

    
    

    (2)transition设置

    
    

    ItVuer - 免责声明 - 关于我们 - 联系我们

    本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

    桂ICP备16001015号