vue-- filter and animation

What are the transitions and animations

Elements in the show and hide, or the transition animation effects, and animations frequently used filters are implemented using CSS.

Operation transition (transition) in CSS or animation (animation) to achieve different effects
Add a parent element <trasition name = "xxx"> element as the goal, so that parent elements by class name of the class is automatically applied to achieve the desired effect
Filtration and animation, will add the relevant class is the class name of the corresponding element of dynamic
- xxx-enter: pre-defined display effect
- xxx-enter-active: the effect of process definition display
- After definition display effect: xxx-enter-to
- xxx-leave: the effect of pre-defined hide
- xxx-leave-active: the effect of the definition of hidden processes
- xxx-leave-to: the effect of the definition of hiding

A transition effect

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style > 
        / * show or hide the transition effects, name value zz is defined below * / 
        / *   .zz Enter-Active-enter, the effect of leaving the Leave-Active-.zz * / 
        .zz-Enter-Active, Leave-Active-.zz {  
            transition : Opacity lS ;  / * transition, gradient duration lS * / 
        } 


        / * effects displayed before or after the hide * / 
        / * before entering .zz-enter, .zz-leave- after leaving to * / 
        .zz-Enter, leave-to-.zz { 
            Opacity : 0 ;   / *   are hidden effect * / 
        } 
    </ style > 
</ head > 

<body > 
    < div ID = "App" > 
        < Button @click = "Show = Show!" > gradual transition </ Button > 
        < Transition name = "ZZ" > <-! name value customization required later - -> 
            < P V-Show = "Show" > transition a </ P >  <-! V-Show is false is not displayed -> 
        </ transition > 
    </ div > 
    < Script >
        new Vue({
            el: "#app",
            data: {
                show: true,
            }
        })
    </script>
</body>

</html>

Two transition effects

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style > 
        / * may be different for the indicated effects show and hide * / 
        / * display transitions lS * / 
        .zz-Enter-Active { 
            Transition : All lS ;  / * All all attributes for lS * / 
        } 

        / * Hide transition effect 3S * / 
        .zz-Leave-Active { 
            Transition : All 3S ;  / * All in all properties, continued 3S * / 
        } 


        / * display the front and rear hidden effects * / 
        .zz-Enter, Leave-to-.zz { 
            Opacity : 0 ;  / * are hidden effects * /
            Transform : the translateX (10px) ;  / * horizontal direction 10px * / 
        } 
    </ style > 
</ head > 

< body > 
    < div ID = "App" > 
        < Button @click = "Show = Show!" > gradual smooth transition </ Button > 
        < transition name = "ZZ" > <-! name value customization required later -> 
            < P V-Show = "Show" > transition two </p> <!-- v-show为false就不显示 -->
        </transition>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                show: true,
            }
        })
    </script>
</body>

</html>

Animation

CSS CSS animations use the same transition, but the use of animation for a specified animated

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style > 
        / * display effect during animation * / 
        .zz-Enter-Active { 
            Animation : ZZ-in lS ; 
        } 


        / * hide during the animation * / 
        .zz-Leave-Active { 
            Animation : ZZ-in lS Reverse ; 
        } 


        @keyframes ZZ-in { 
            0% { / * length The percentage duration, such as for 1s: 0% stands for 0 seconds, 50% represents 0.5 * / 
                Transform : Scale (0) ;  / * is reduced to 0 * / 
            } 

            50 % { 
                the Transform :Scale (1.5) ;  / * enlarged 1.5 times * / 
            } 

            100% { 
                Transform : Scale (. 1) ;  / * original size * / 
            } 
        } 
        
    </ style > 
</ head > 

< body > 
    < div ID = "App" > 
        < Button @click = "Show =! Show" > zoom animation </ Button > 
        < Transition name = "ZZ" > <!- name value customization required later -> 
            <the p- v-Show = "Show" > I animated </ the p- >  <-! v-Show is false is not displayed -> 
        </ Transition > 
    </ div > 
    < Script > 
        new new Vue ({ 
            EL: " # App " , 
            Data: { 
                Show: to true , 
            } 
        }) 
    </ Script > 
</ body > 

</ HTML >

vue-- filter and animation

What are the transitions and animations

A transition effect

Two transition effects

Animation

Guess you like