一聚教程网:一个值得你收藏的教程网站

热门教程

vue如何进行动画的封装

时间:2022-06-25 15:36:49 编辑:袖梨 来源:一聚教程网

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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,除了这样,还可以样式一起封装进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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>

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

热门栏目