This is the 17th day of my participation in the August Challenge

Question origin

Problems originated in a production environment to be a round figure, before we in the article: pure CSS implementation by diagram and article: frameless from zero to achieve a shuffling figure | August challenge more article introduces two generated by the way, accidentally discovered in VUE has an animated features: In/out & list transition, there is a feature that is very similar to the rotation effect we want. The image below is taken from the first example on the In/out & list transition website.

This is very similar to the effect we want to have on the rotation map.

Thus open our learning road, set out ~~

<transition>Basic usage of

The example on the website explains that < Transition > supports four types of “in/out”, including:

  • Conditional rendering (usev-if)
  • Conditional display (usev-show)
  • Dynamic components
  • Component root node

Such as:

<! DOCTYPEhtml>
<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">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>

    <body>
        <div id="components-demo">
            <button v-on:click="show = ! show">
                Toggle
            </button>
            <transition name="fade">
                <p v-if="show">hello</p>
            </transition>
        </div>
    </body>

    <script>

        new Vue({
            el: '#components-demo'.data: {
                abb: 'abc'.show: false
            },
            methods: {}});</script>
    <style>
        .fade-enter-active..fade-leave-active {
            transition: opacity 2s;
        } 
        .fade-enter..fade-leave-to /*.fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
    </style>

</html>

Copy the code

This example from the official website shows how to use
in a simple way.

And from the animation principle explained on the official website, it can be seen that the basic principle is to achieve animation effect through dynamic binding CSS.

So the question is, can you use
to implement a carousel graph? Guess from the meaning of this should be the “list transition” section of VUE, let’s try it out

use<transition-group>Realize the round broadcast graph

Vue
can only use a single component and does not support list transitions. List transitions need to use
.
 

<! DOCTYPEhtml>
<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">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <button @click="activeIndex++">btton</button>
            <transition-group name="list" tag="div" style="overflow: hidden; height: 40px; border: 1px solid black;" class="center">
                <div v-for="index in list" :key="index" v-show="activeIndex === index" style="border: 1px solid black; margin: 0; padding:0; background: lightblue;">
                    {{index}}
                </div>
            </transition-group>
        </div>
    </body>

    <script>

        new Vue({
            el: '#app'.data: {
                abb: 'abc'.show: false.list: [
                    1.2.3.4.5].activeIndex: 1
            },
            methods: {}});</script>
    <style>
        .list-enter-to {
            transition: all 1s ease;
            transform: translateY(0);
        }

        /* Animation of the last element disappearing */
        .list-leave-active {
            transition: all 1s ease;
            transform: translateY(-40px);
            
        }
        
        /* Animation for the next element */
        .list-enter {
            transform: translateY(100%);
        }

        .list-leave {
            transform: translateY(0);
        }

        .center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

    </style>

</html>

Copy the code

Animation effect:

Strangely enough, the element always shakes at the end. No cause has been determined.