Vue transition and animation

1. Display and hide elements of the transition animation effects

(1) add a parent element transition to the target element, and add the name attribute  

      Add v-show in the target element = "isShow" isShow of the data Vue

    Add isShow value button buttons control "

    <div id="demo">
        <button @click="isShow = !isShow">点击这里变色</button> 
<transition name="isd">
 <div v-show="show" id="box">哈哈</div> 
</transition> 
</div>

<script>

        new view ({

            el: "#demo",

            data: {

             isShow:true 

            },

            methods: {

            

            }

        })

    </script>

(2) add style in style in

.Xxx-enter-active effect display process

.Xxx-leave-active effect of hidden processes

Effect before .xxx-enter the display

Effect after .xxx-enter-to display

.Xxx-leave before the effect of hiding

Effect after .xxx-leave-to Hide

xxx transition value representing the name attribute of tag

.isd-enter-active,.isd-leave-active{
        transition: all 5s;
    }
    .isd-enter,.isd-leave-to{
        opacity: 0;
        transform: translateX(100px);
    }

 2. Custom Animation

(1) dom Vue elements and hide the display, as in the

<div id="demo">
        <@ the Click the Button = " Show =! Show " > Click here </ button>

        <transition name="box">
        <P = V-Show " Show " > ha ha </ p>
        </transition>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new view ({
            el: "#demo",
            data: {
              show:true 
            },
            methods: {
            

            }
        })
    </script>

 

(2) the use of custom animation  

Animation Animation @keyframes defined {name} {0% 50% 100%} {} {} in braces expressed as a percentage of the various stages of animation

Animation .xxx-enter-active, .xxx-leave-active {animation: name of the animation time;} xxx attribute value of the representative tag name transition

.box-enter-active,.box-leave-active{
        animation: scale 10s;
    }
    @keyframes scale {
    0%{
    transform: scale(0);
    }
    50%{
    transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}