18.vue中的动画封装

作者: yaoyao妖妖 | 来源:发表于2018-07-07 21:58 被阅读63次

18.vue中的动画封装
vue中动画封装
Vue中的动画封装
Vue中的动画封装
Vue中的动画封装
vue零基础开发028——Vue中的动画封装
Day15（JS动画，JS获取CSS属性，demo 导航缓动）
加载小动画
iOS 核心动画（下）
compose--动画

1.动画封装之后可复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的列表过渡</title>
    <script src="./vue.js"> </script>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
        }

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

</head>
<body>


   <div id="root">

         <fade :show="show">
            <div>helloworld</div> 
         </fade>

         <fade :show="show">
                <h1>he</h1> 
         </fade>

       <button @click="handleClick">add</button>   

   </div>

   <script>  

       Vue.component('fade',{
           props:['show'],
           template:'<transition><slot v-if="show">helloworld</slot> </transition>'

       })


       var count = 0;
       var app = new Vue({
           el:'#root',
           data:{
            show :false
           },
           methods:{
            handleClick:function(){
                 this.show = !this.show
            }
           }
       })

   </script>

</body>

</html>

2.样式也可以封装到动画里面(进一步封装)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的列表过渡</title>
    <script src="./vue.js"> </script>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
        }

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

</head>
<body>


   <div id="root">

         <fade :show="show">
            <div>helloworld</div> 
         </fade>

         <fade :show="show">
                <h1>he</h1> 
         </fade>

       <button @click="handleClick">add</button>   

   </div>

   <script>  

       Vue.component('fade',{
           props:['show'],
           template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show">helloworld</slot> </transition>',
           methods:{
               handleBeforeEnter:function(el){
                   el.style.color = 'red';
                },

               handleEnter:function(el,done){
                   setTimeout(() => {
                     el.style.color = 'green';
                     done()
                     }, 2000);
                }
           

           }

       })


       var count = 0;
       var app = new Vue({
           el:'#root',
           data:{
            show :false
           },
           methods:{
            handleClick:function(){
                 this.show = !this.show
            }

           }

       })

   </script>

</body>

</html>