Home >Web Front-end >JS Tutorial >Detailed explanation of examples of animation transition effects for Vue elements

Detailed explanation of examples of animation transition effects for Vue elements

零下一度Original: 2018-05-14 15:58:033511browse

This article mainly introduces the vue element to achieve animation Transition effect. The editor thinks it is quite good. Now I will share it with you and give it a reference. Let’s follow the editor and take a look.

1 In vue, use the 300ff3b250bc578ac201dd5fb34a0004 tag to contain a single sub-element using v-show or v-if Before switching the display and hiding, it will first determine whether there is a corresponding class style that can match the sub-element:

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redv-leave { margin-top: 50px; }
  redv-leave-active { transition: all 3s;}
  redv-leave-to { margin-top: 100px; opacity: 0;}
  redv-enter { margin-top: 50px; }
  redv-enter-active { transition: all 3s;}
  redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
  <transition>
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>
</script>
</body>

v-leave The current element is ready to be changed from displayed to hidden. It is added to the element before the animation starts. It will be deleted immediately once the animation starts;
v- leave-active: During the animation transition process, the element always has this style. It will be automatically deleted until the end of the animation. It is used to set the transition effect;
v-leave-to During the animation transition process , the element always has this style, and will be automatically deleted until the end of the animation, which is used to set the final effect of the animation;

In the example, when the button is clicked, p will not display immediately: none , instead, v-leave is set first, v-leave is deleted the next moment, and v-leave-active v-leave-to is added at the same time. When the transition time in v-leave-active is completed, v-leave-active is deleted v-leave-to, and add display: none.

v-enter The current element is ready to change from hidden to displayed. It is added to the element before the animation starts. It will be deleted immediately once the animation starts;
v-enter-active During the animation transition process, the element always has this style. It will be automatically deleted until the end of the animation. It is used to set the transition effect;
v-enter-to During the animation transition process, the element always has this style, and is automatically deleted until the end of the animation. It is used to set the final effect of the animation;

In the example, when the button is clicked, p immediately clears the display : none, then set v-enter, delete v-enter the next moment, and add v-enter-active v-enter-to. When the transition time in v-enter-active is completed, delete v-enter-active v-enter-to.

2 Custom animation class name:

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  redslide-leave { margin-top: 50px; }
  redslide-leave-active { transition: all 3s;}
  redslide-leave-to { margin-top: 100px; opacity: 0;}
  redslide-enter { margin-top: 50px; }
  redslide-enter-active { transition: all 3s;}
  redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
  <transition name="slide">
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>

This effect is exactly the same as the previous example, transition elements can use name attribute to specify the class name prefix used to replace the v- field, for example, name="slide" in the example makes the original v-enter became slide-enter.

3 When transition and animation are used at the same time

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  blue {background-color: blue; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s; animation: aslide 5s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
  <transition type="transition" >
    <p class="red" v-show="show"></p>
  </transition>
  <br>
  <transition type="animation" >
    <p class="blue" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function(){
      thisshow = !thisshow;
    }
  }
});
</script>

In the case, the animation specifies both transition and animation animation, and the transition element The type attribute can specify which animation time is used as the end time of the element. If the animation monitoring method is not specified, the longest time will prevail.

4 javascript monitoring animation

<script src="/public/javascripts/vuejs"></script>
<style>
  red {background-color: red; width: 100px; height: 100px;}
  v-leave { margin-top: 50px; }
  v-leave-active { transition: all 3s;}
  v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
  <transition
    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"
    >
    <p class="red" v-show="show"></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog(&#39;-----------click---------&#39;);
    },
    beforeEnter: function (el) {
      consolelog(&#39;beforeEnter:&#39;);
    },
    enter: function (el, done) {
      consolelog(&#39;enter:&#39;);
      // done()
    },
    afterEnter: function (el) {
      consolelog(&#39;afterEnter:&#39;);
    },
    enterCancelled: function (el) {
      consolelog(&#39;enterCancelled:&#39;);
    },
    beforeLeave: function (el) {
      consolelog(&#39;beforeLeave:&#39;);
    },
    leave: function (el, done) {
      consolelog(&#39;leave:&#39;);
      done()
    },
    afterLeave: function (el) {
      consolelog(&#39;afterLeave:&#39;);
    },
    leaveCancelled: function (el) {
      consolelog(&#39;leaveCancelled:&#39;);
    }
  }
});
</script>

Once the js event is used, the original css animation transition effect will Invalid, the official recommendation is to set v-bind:css="false" on 4c953847164cc2bb3043fbad7679285394b3e26ee717c64999d7867364b1b4a3 to avoid the need for Vue's internal mechanism to monitor css animation event callbacks , improve performance.
Enter and leave events need to manually call the done method, otherwise the event will never call the subsequent after event. If the after event is not called but other events start, it will be regarded as animation. Was canceled.

5 Animation during page initialization:

<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
  0% {
    margin-left: 10px;
  }
  100% {
    margin-left: 100px;
  }
}
  red {background-color: red; width: 100px; height: 100px;}
  apper { margin-top: 50px; }
  apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<p id="app">
  <transition
    appear 
    appear-class="apper" 
    appear-active-class="apper-active" 
    v-on:before-appear="customBeforeAppearHook"
    v-on:appear="customAppearHook"
    v-on:after-appear="customAfterAppearHook" >
    <p class="red" ></p>
  </transition>
  <button v-on:click="change">button</button>
</p>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  },
  methods: {
    change: function() {
      thisshow = !thisshow; 
      consolelog(&#39;-----------click---------&#39;);
    },
    customBeforeAppearHook: function (el) {
      consolelog(&#39;customBeforeAppearHook:&#39;);
    },
    customAppearHook: function (el) {
      consolelog(&#39;customAppearHook:&#39;);
      // done()
    },
    customAfterAppearHook: function (el) {
      consolelog(&#39;customAfterAppearHook:&#39;);
    }
  }
});
</script>

The appear attribute indicates that the initialization animation is turned on, the appear-class attribute specifies the style before initialization, and the appear-active-class attribute specifies the style of the initialization animation process;
transition animation cannot be started in the initialization animation. Effective, while animation animation can;
before-appear appear after-appear is an event callback, it is quite clear to see the example.

6 Key of animation element:

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter-active { transition: all 15s;}
  v-enter-to { margin-top: 100px;}
  v-leave-active { transition: all 15s;}
  v-leave-to { margin-top: 10px;}
</style>
<body>
<p id="app">
  <p class="show1">
    <transition>
      <button v-if="show1" @click="show1 = false">on</button>
      <button v-else @click="show1 = true">off</button>
    </transition>
  </p>
  <p class="show2">
    <transition>
      <button v-if="show2" key="on" @click="show2 = false">on</button>
      <button v-else key="off" @click="show2 = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show1: true,
    show2: true
  }
});
</script>

#show1 Why is there no animation effect? Because vue will recognize the two buttons in the switch as the same element, but only modify the different contents in the buttons, so the DOM element switching does not actually occur on the page;

If you want vue To clearly identify that these are two different button elements, specify different key attribute values for each element.

7 Animation mode for element switching:

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 5s;}
  v-enter-to { margin-left: 10px;}
  v-leave { margin-left: 10px;}
  v-leave-active { transition: all 5s;}
  v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
  <p class="default">
    <transition>
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="inout">
    <transition mode="in-out">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
  <p class="outin">
    <transition mode="out-in">
      <button v-if="show" key="on" @click="show = false">on</button>
      <button v-else key="off" @click="show = true">off</button>
    </transition>
  </p>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    show: true
  }
});
</script>

transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；
mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；
mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；

8 多元素动画：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-enter { margin-left: 100px;}
  v-enter-active { transition: all 2s;}
  v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
  <transition-group>
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <transition-group tag="ul">
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1]
  }
});
</script>

transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；
transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；
transition-group 必须为每一个子元素指定 key；

8 多元素的位移动画：

<script src="/public/javascripts/vuejs"></script>
<style>
  v-move { transition: all 1s; }
</style>
<body>
<p id="app">
  <transition-group tag="ul" >
    <li v-for="item in items" :key="item">{{item}}</li>
  </transition-group>
  <button @click="itemsreverse()">reverse</button>
</p>
<script>
var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    items: [0,1,2,3]
  }
});
</script>

transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；
transition 的属性， transition-group 都有，包括 name enter leave；

The above is the detailed content of Detailed explanation of examples of animation transition effects for Vue elements. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css if class JS 事件 dom display transition animation ul

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementing Ajax form validation examples using Vue.js in LaravelNext article：Implementing Ajax form validation examples using Vue.js in Laravel

See more

Detailed explanation of examples of animation transition effects for Vue elements

Related articles