vue transition animation learning

Posted by lox on Sat, 31 Aug 2019 06:16:42 +0200

Article Directory

Article Reference

  1. Enter/Leave & List Transition

Problem Description

Today, while learning Vue animation, I found that I am not familiar with the properties of components. Here is a review

Conceptual Interpretation

  1. Animation state is divided into "start state" -- "transition state" -- "end state"
  2. Display: enter ------ enter-active ----- enter-to
  3. Hide: leave ----- leave-active ------ leave-to

case

Custom Animation

<!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="../js/vue.js"></script>
</head>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: rebeccapurple;
    display: inline-block;
}
.fade-enter{
    opacity: 0;
    background-color: green;
    transform: rotate(0deg);
    transform: scale(2, 4)
}

.fade-enter-active{
    transition: all 3s;
}

.fade-enter-to{
    opacity: 1;
    background-color: red;
    transform: rotate(360deg);
}

.fade-leave{
    opacity: 1;
}

.fade-leave-active{
    transition: all 3s;
}

.fade-leave-to{
    opacity: 0;
    transform: translate(300px, 200px);
}

</style>
<body>
    <div id="app">
        <transition name='fade'>
            <div class="box" v-if='isShow'></div>
        </transition>
        <div>
            <button @click='toggleAction'>switch</button>
        </div>
    </div>
</body>
<script>  
/**
*/ 
var app = new Vue({
    el: '#app',
    data: function () {
        return {
            isShow: true
        }
    },
    methods: {
        toggleAction: function () {
            this.isShow = !this.isShow;
        }
    },
})
</script>
</html>
  1. The name value in <transition name='fade'>is the name used as the style
  2. Trigger animation with v-if whenever possible
  3. Because name='fade', the styles entered are fade-enter, fade-enter-active, fade-enter-to
    • fade-enter represents the initial style of display
    • fade-enter-to represents the last style to display
    • fade-enter-active represents the transition time from fade-enter to fade-enter-to style
  4. Because name='fade', the styles entered are fade-leave, fade-leave-active, fade-leave-to
    • fade-leave represents the initial style of deletion
    • fade-leave-to denotes deleting the last style
    • fade-leave-active represents the transition time from fade-leave to fade-leave-to style

Reference animate.css animation

<!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>
    <link rel="stylesheet" href="../js/animate.css">
    <script src="../js/vue.js"></script>
</head>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: rebeccapurple;
    display: inline-block;
}
</style>
<body>
    <div id="app">
        <transition 
            leave-active-class='flash animated'
            enter-active-class='rollIn animated'
        >
            <div class="box" v-if='isShow'></div>
        </transition>
        <div>
            <button @click='toggleAction'>switch</button>
        </div>
    </div>
</body>
<script>  
var app = new Vue({
    el: '#app',
    data: function () {
        return {
            isShow: true
        }
    },
    methods: {
        toggleAction: function () {
            this.isShow = !this.isShow;
        }
    },
})
</script>
</html>

Animation Hook Function

<!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>
    <link rel="stylesheet" href="../js/animate.css">
    <script src="../js/vue.js"></script>
</head>
<style>
.box{
    height: 100px;
    width: 100px;
    background-color: rebeccapurple;
    display: inline-block;
}

</style>
<body>
    <div id="app">
        <transition 
            leave-active-class='flash animated'
            enter-active-class='rollIn animated'
            
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled"
        >
            <div class="box" v-if='isShow'></div>
        </transition>
        <div>
            <button @click='toggleAction'>switch</button>
        </div>
    </div>
</body>
<script>  
/**
*/ 
var app = new Vue({
    el: '#app',
    data: function () {
        return {
            isShow: true
        }
    },
    methods: {
        toggleAction: function () {
            this.isShow = !this.isShow;
        },
        beforeEnter: function () {
            console.log('beforeEnter')
        },
        enter: function () {
            console.log('enter')
        },
        afterEnter: function () {
            console.log('afterEnter')
        },
        enterCancelled: function () {
            console.log('enterCancelled')
        },
        beforeLeave: function () {
            console.log('beforeLeave')
        },
        leave: function () {
            console.log('leave')
        },
        afterLeave: function () {
            console.log('afterLeave')
        },
        leaveCancelled: function () {
            console.log('leaveCancelled')
        }
    },
})
</script>
</html>

Case Analysis

Topics: Vue IE

Hot Topics

©2024 Programmer Think