Initial understanding of Vue (transition animation of multiple elements or components in Vue)

Keywords: Vue

Transition animation of multiple elements or components in Vue

To achieve the effect of multi element transition animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue Transition animation of multiple elements or components in</title>
    <script src = './vue.js'></script>
   <!--  <script src = './velocity.js'></script> -->
   <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
   </style>
</head>
<body>
    <div id ='root'>
      <transition>
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>
      <button @click="handleClick">toggle</button>
    </div>

    <script>
     var vm = new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show

            },
            handleBeforeEnter:function(el){
                el.style.opacity = 0;
            },
            handleEnter:function(el,done){
                Velocity(el,{opacity:1},
                    {duration:1000,
                     complete:done
                    })
            },
            handleAfterEnter:function(el){
               console.log("End of animation") 
            }
        }
       })
    </script>   
</body>
</html>

Output: Click - Hello World gradually hides (1s), by world directly appears - click again - by world gradually hides, Hello World directly appears

           

Prevent the reuse of div s in Vue and add different key values

<transition>
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>

 

Vue also provides the effect of mode configuration parameter setting when multiple properties are switched

(in out: when multiple elements are displayed, the first displayed element enters first, and the element to be hidden will be hidden.)

 <div id ='root'>
      <transition mode="in-out">
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>

Output: Click - by world appears gradually (1s), Hello World is hidden - click again - by world appears gradually (1s), by world is hidden

            

(out in: when multiple elements are displayed, the elements to be hidden are hidden first, and the elements to be displayed are entered first;)

 <transition mode="out-in">
        <div v-if ="show" key="hello">Hello World</div>
        <div v-else key="bye">Bye World</div>
      </transition>

Output: Click - Hello World gradually hides (1s) by world appears - click again - by world gradually hides (1s), Hello World appears

            

 

To achieve the effect of multi-component transition animation

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue Transition animation of multiple elements or components in</title>
    <script src = './vue.js'></script>
   <!--  <script src = './velocity.js'></script> -->
   <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
   </style>
</head>
<body>
    <div id ='root'>
      <transition mode="out-in">

        <child v-if ="show" ></child>
        <child-one v-else></child-one>
      </transition>
      <button @click="handleClick">toggle</button>
    </div>

    <script>

     Vue.component('child',{
        template:'<div>child</div>'
     })
     Vue.component('child-one',{
        template:'<div>child-one</div>'
     })
     var vm = new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show

            }
    
        
       }
    })
    </script>   
</body>
</html>

Output: Click - gradually hide (1s) child one appears - click again - gradually hide (1s) child one appears

                 

 

Through dynamic components

Component to define the dynamic component, and is property to bind the component and the defined component name to control the execution of that component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>  Vue Transition animation for multiple elements or components in</title>
    <script src = './vue.js'></script>
   <!--  <script src = './velocity.js'></script> -->
   <style>
     .v-enter,.v-leave-to{
      opacity:0;
     }
     .v-enter-active,.v-leave-active{
      transition: opacity 1s;
     }
   </style>
</head>
<body>
    <div id ='root'>
      <transition mode="out-in">
        <component :is="type"></component>
        <!-- <child v-if ="show" ></child>
        <child-one v-else></child-one> -->
      </transition>
      <button @click="handleClick">toggle</button>
    </div>

    <script>

     Vue.component('child',{
        template:'<div>child</div>'
     })
     Vue.component('child-one',{
        template:'<div>child-one</div>'
     })
     var vm = new Vue({
        el:'#root',
        data:{
            type:'child'
        },
        methods:{
            handleClick:function(){
                this.type = this.type === 'child' ? 'child-one' : 'child'
             //If the type is child, if it is, then it is assigned to child one; if it is not, then it is assigned to child
            }
    
        
       }
    })
    </script>   
</body>
</html>

Output: Click - gradually hide (1s) child one appears - click again - gradually hide (1s) child one appears

                 

methods:{
            handleClick:function(){
                this.type = this.type === 'child' ? 'child-one' : 'child'
             
            }

Judge whether the type is child. If it is, assign it to child one. If it is not, assign it to child

Posted by ulenie on Tue, 07 Jan 2020 08:30:56 -0800

Hot Keywords

©2025 Programmer Group