Animated effects in Vue

Vue provides a variety of different ways of applying transition effects when inserting, updating, or removing DOM. Including the following tools:

  • Automatic application of class
  • in CSS transitions and animations can be used with third-party CSS animation libraries, such as Animate.css
  • using JavaScript in transition hook functions to directly manipulate [email protected]@ @@ can be used with third-party JavaScript animation libraries, such as Velocity.js
  • Vue, which provides a packaged component of

transitionconditional rendering (using  的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

, which can add in/out transitions to any element and component in the following situations.
  • conditional display (using v-if)
  • 动态组v-show)
  • 组件root

@@ There are 6 class switches.

  1. v-enter: Defines the start state of the transition. It takes effect before the element is inserted and is removed in the next frame after the element is inserted.

  2. v-enter -active: Defines the state when the transition is in effect. It is applied throughout the transition phase, before the element is inserted, and after the transition/animation is completed. This class can be used to define the transition to the transition. Time, delay and curve function.

  3. v-enter-to2.1.8 version and aboveDefining the end of the transition The next frame takes effect after the element is inserted (at the same time v-enter is removed), removed after the transition/animation is completed.

  4. v-leave: Defines the starting state of the leaving transition. It takes effect immediately when the leaving transition is triggered, and the next frame is removed.

  5. v-leave-active: Defines the state when the leaving transition is in effect. The application, which takes effect immediately when the transition is triggered, is removed after the transition/animation is completed. This class can be used to define the process time, delay and curve functions that leave the transition.

  6. v-leave-to2.1.8版 and above| ||Defines the end state of the transition. The next frame takes effect after the transition is triggered (at the same time  定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave is deleted), removed after the transition/animation is completed.

We can customize the transition class name with the following features:

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue animation</title>
    <script src="./vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

    <style>
        .fade-enter,
        .fade-leave-to {
            Opacity: 0;
        }
        
        .fade-enter-active,
        .fade-leave-active {
            Transition: opacity 1s;
        }
    </style>
</head>

<body>

    <div id="root">
        <transition :duration="{enter: 5000,leave:10000}" name="fade" appear enter-active-class="animated fadeIn fade-enter-active" leave-active-class="animated fadeOut fade-leave- Active" appear-active-class="animated fadeIn ">
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>

    <script>
        Var app = new Vue({
            El: " #root ",
            Data: {
                Show: true

            },
            Methods: {
                handleClick: function() {
                    This.show = !this.show;
                }
            }
        })
    </script>
</body>

</html>

1.appear : Solve the first time without animation effect

2.duration="{enter: 5000,leave:10000}" Uncertain time to solve the two animation effects.