Vue的动画封装

问题：如果在slot标签上使用v-show，程序功能是无法实现的，必须改成v-if。

原因：slot实际是一个抽象元素，有点类似template,本质并不是一个元素。

而v-show是通过控制元素的display来进行显示和隐藏的，slot本身不是元素，所以压根就不会有display这个css属性

所以,slot显示隐藏,要使用v-if。

css动画在<style>中定义，js动画在@before-enter="handleBeforEnter"中定义

步骤：

1.定义一个名为fade 的组件，然后在加上transition模板，并在此模板中加入slot插槽，slot中v-if绑定“show”属性，它的显示与否取决于父组件fade传进来的show的变量是否是show

2.当使用的时候只需要在dom元素上包裹一层fade组件，并在fade组件上绑定show属性，令其等于子组件中v-if绑定的show内容。

3.推荐动画使用js动画而不是css动画，从而使所有动画代码封装在一个组件里。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的动画封装</title>
<script src="./vue.js"></script>
</head>
<body>
  <div id="root">
   
    <fade :show="show">
      <div>hello world
      </div>
    </fade>
     <fade :show="show">
      <h1>hello world
      </h1>
    </fade>
    <button @click="handleBtnClick">toggle</button>
   </div>
   <script>
    Vue.component('fade',{
      props:['show'],
      template:`
      <transition @befor-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()
          },4000)

        }
       }

    })
    
    var vm=new Vue({
      el:'#root',
      data:{
      show:false
      },
      methods:{
       handleBtnClick:function(){
        this.show=!this.show
       }
      }
    })
   </script>
</body>
</html>
posted @ 2019-12-21 14:29  嘘，在学习呢  阅读(294)  评论(0)  编辑  收藏  举报