当前位置:首页 >> 网络编程

vue如何进行动画的封装

本文实例为大家分享了vue动画封装的具体代码,供大家参考,具体内容如下

<style>
  .v-enter,.v-leave-to{
    opacity: 0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity 1s;
  }
</style>


<div id='app'>
  <transition>
    <div v-if='show'>hello world</div>
  </transition>
  <button @click='handleClick'>切换</button>
</div>

<script>
var vm = new Vue({
  el:'#app',
  data:{
    show:true
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>

有时候这种渐隐渐现的效果用的比较多,要复用,需要封装一下,怎么封装呢

<style>
  .v-enter,.v-leave-to{
    opacity: 0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity 1s;
  }
</style>


<div id='app'>
  <fade :show='show'>
    <div>hello world</div>
  </fade>
  <fade :show='show'>
    <h1>hello world</h1>
  </fade>
  <button @click='handleClick'>切换</button>
</div>

<script>
Vue.component('fade',{
  props:['show'],
  template: `
    <transition>
      <slot v-if='show'></slot>
    </transition>
  `
})
var vm = new Vue({
  el:'#app',
  data:{
    show:false
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>

可以这样封装,将dom元素传入slot,除了这样,还可以样式一起封装进去

<div id='app'>
  <fade :show='show'>
    <div>hello world</div>
  </fade>
  <fade :show='show'>
    <h1>hello world</h1>
  </fade>
  <button @click='handleClick'>切换</button>
</div>

<script>
Vue.component('fade',{
  props:['show'],
  template: `
    <transition @before-enter='handleBeforeEnter' @enter='handleEnter'>
      <slot v-if='show'></slot>
    </transition>
  `,
  methods:{
    handleBeforeEnter:function(el){
      el.style.color='red'
    },
    handleEnter:function(el,done){
      setTimeout(()=>{
        el.style.color='green';
        done();
      },2000)
    }
  }
})
var vm = new Vue({
  el:'#app',
  data:{
    show:false
  },
  methods:{
    handleClick:function(){
      this.show = !this.show;
    }
  }
})
</script>

把样式一起封装进来,是比较推荐的方式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。