CSS transition

  • Examples in the document
<template>
  <div id="demo">
  <button v-on:click="show = ! show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
</template>

<script>
export default {
  data() {
    return {
      show:true}}}</script>

<style scope>
.fade-enter-active..fade-leave-active {
  transition: opacity .5s;
}
.fade-enter..fade-leave-to /*.fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
Copy the code
  • Vue encapsulates the tag for the Transition animation:<transition></transition>
    • The Transition tag has a name attribute, and that attribute passes in whatever string is at the beginning of the class that controls the animation.
    • Such as:<transition name="x"></transition>
      • The class names that control the animation are.x-enter,.x-leave
  • Classes that control animation
    1. .fade-enter
      • The moment the fade begins can be understood as the first frame of the animation. The.fade-enter class disappears after the first frame ends and is replaced with.fade-enter
    2. .fade-enter-to
      • During fade-in,.fade-enter will continue until the end of the fade
    3. .fade-enter-active
      • Fades the transition into effect.
    4. Similarly,.fade-leave,.fade-leave-to and.fade-leave-active are the effective states of fade-out moment, fade-out process and fade-out transition

    So, the fade-in and fade-out examples in the document are equivalent to writing:

<style scope>
    .fade-enter-active，
    .fade-leave-active {
        transition: all .5s;
    }
    .fade-enter {
        opacity: 0;
    }
    .fade-enter-to {
        opacity: 1;
    }
    .fade-leave {
        opacity: 1;
    }
    .fade-leave-to {
        opacity: 0;
    }
</style>
Copy the code
  • Another example from the documentation: do a side shift on fade-out
<style scope>
.fade-enter-active{
    transition: all .3s ease;
}
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0.0.5.0.8.1.0);
}
.fade-enter {
    opacity: 0;
    transform: translateX(20px);
}
 .fade-leave-to {
    opacity: 0;
    transform: translateX(20px);
}
</style>
Copy the code

Animation animation

  • Examples in the document
<template>
    <div id="example-2">
        <button @click="show = ! show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">
              Lorem ipsum dolor sit amet, 
              consectetur adipiscing elit.
              Mauris facilisis enim libero, 
              at lacinia diam fermentum id. 
              Pellentesque habitant morbi tristique senectus et netus.
            </p>
        </transition>
    </div>
</template>

<script>
export default {
  data() {
    return {
      show:true}}}</script>

<style scope>
/* Define only transition states during animation */
.bounce-enter-active { 
  animation: bounce-in .5s;
}
/* Fade the animation into reverse execution */
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1); }}</style>
Copy the code
  • Instead of using the Style class to control the animation, use @Keyframes to customize the animation process
    • Using an animation to define an animation is much simpler. You only need to define the state of the fade in and fade out process
    • The final state of the animation must be normal

Use third-party libraries to create animations

  • animate.css
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
Copy the code
<template>
    <div id="example-3">
      <button @click="show = ! show">
        Toggle render
      </button>
      <transition
        enter-active-class="animated rollIn"
        leave-active-class="animated rollOut"
      >
            <p v-if="show">
              Lorem ipsum dolor sit amet, 
              consectetur adipiscing elit.
              Mauris facilisis enim libero, 
              at lacinia diam fermentum id. 
              Pellentesque habitant morbi tristique senectus et netus.
            </p>
      </transition>
    </div>
</template>

<script>
export default {
  data() {
    return {
      show:true}}}</script>
Copy the code
  • The rollIn and rollOut classes defined in animate. CSS are used in the example.
  • We can easily pass throughenter-active-class 和 leave-active-classChange the class name to implement the animation effects provided by different Animate

Multielement animation

  • Button switch
<template>
<div id="example-4">
  <transition name="fade">
    <button key="on" v-if="status === 'off'" 
      @click="status = 'on'"
    >on</button>
    <button key="off" v-else
      @click="status = 'off'"
    >off</button>
  </transition>
</div>
</template>

<script>
export default {
  data() {
    return {
      status: 'on'}}}</script>

<style scope>
.fade-enter-active..fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
</style>
Copy the code
  • As one button disappears, another button appears

    • Vue provides the mode attribute to control this process

      • Mode =”in-out” The new element completes the transition and the old element disappears
      • Mode =” out-of-in “mode=” out-of-in” mode=” out-of-in

    • The mode attribute applies to the Transition tag

  • Simulate the effect of rotation
<template>
<div id="example-4">
  <transition name="fade">
    <button key="on" v-if="status === 'off'" 
      @click="status = 'on'"
    >on</button>
    <button key="off" v-else
      @click="status = 'off'"
    >off</button>
  </transition>
</div>
</template>

<script>
export default {
  data() {
    return {
      status: 'on'}}}</script>

<style scope>
.fade-enter-active..fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(100px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}
button {
  position: absolute;
}
</style>
Copy the code
  • Analog TAB switching
<template>
  <div>
    <button @click="view = 'A'">A</button>
    <button @click="view = 'B'">B</button>
    <transition name="component-fade" mode="out-in">
      <component :is="view"></component>
    </transition>
  </div>
</template>

<script>
import A from "@/components/A.vue";
import B from "@/components/B.vue";
export default {
  data() {
    return {
      view: "A"}; },components: { A, B },
};
</script>

<style scope>
.component-fade-enter-active..component-fade-leave-active {
  transition: opacity 0.3 s ease;
}
.component-fade-enter..component-fade-leave-to {
  opacity: 0;
}
</style>
Copy the code

List the transition

<template>
  <div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1.2.3.4.5.6.7.8.9].nextNum: 10}; },methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0.this.nextNum++);
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1); ,}}};</script>

<style scope>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active..list-leave-active {
  transition: all 1s;
}
.list-enter..list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

Copy the code
  • <transition-group>component
    • Different from the<transition>, which will be rendered as a real element, default to one<span>. We can get throughtagProperty to replace it with another element.
    • modeProperties cannot be applied to<transition-group>
    • Must bind non-duplicatekey