How to set animation when switching components in uniapp

With the booming development of mobile Internet, more and more applications are beginning to put user experience first. In design and development, animation, as one of the interactive methods, is becoming more and more important.

Uniapp is one of the more popular cross-platform development frameworks. It supports the simultaneous development of multiple platforms (such as WeChat mini programs, H5, App, etc.), reducing development costs and time. In Uniapp, it is relatively simple to implement component switching animation. Let’s discuss it together.

1. Use the transition component

When switching components, we can use the transition component in Vue to implement animation. The transition component implements the transition animation effect by implementing the following four CSS class names:

• .v-enter: takes effect when the element is inserted.
• .v-enter-active: Define the state of the transition. Takes effect when the element is inserted and is removed before and after the transition process is completed.
• .v-enter-to: Newly added in version 2.1.8 or above. It takes effect when the element is inserted and takes effect after the transition process is completed.
• .v-leave: takes effect when the element is removed.
• .v-leave-active: Define the state of transition. Takes effect when the element is removed, before and after the transition process is completed.
• .v-leave-to: Newly added in version 2.1.8 and above. It takes effect when the element is removed and after the transition process is completed.

Below we use an example to demonstrate how to use the transition component:

<template>
  <div class="container">
    <transition name="fade">
      <div v-if="show">我是一段文字</div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
}
</script>

In this example, we use the v-if directive in Vue to display and hide elements. . If show is true, then <div v-if="show">I am a piece of text</div> will be rendered, otherwise it will not be displayed. On this element, we used Vue's transition component, set the name attribute to "fade", and defined two class names fade-enter-active and fade-leave-active to specify the time and attributes of the transition effect. . In the fade-enter and fade-leave-to class names, we specify the opacity attribute of the element so that the element has a fade-in and fade-out effect when shown and hidden.

2. Define the global transition effect in the App.vue file

If we need to use the same transition effect throughout the entire application, we can define the global transition effect in the App.vue file components. The following is an example of implementing a transition effect for page switching:

<template>
  <div class="container">
    <transition name="page">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s;
}

.page-enter,
.page-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>

In this example, we use the routing component router-view in Vue to implement page switching. Outside this component, we use a transition component and set the name attribute to "page". On this transition component, we also define two class names page-enter-active and page-leave-active, which are used to specify the time and attributes of the transition effect. In the page-enter and page-leave-to class names, we specify the opacity and transform attributes of the elements, so that the page has a translation and fading effect when entering and leaving.

3. Use the Animation tag in the component

In addition to the transition component, Uniapp also provides us with a simpler way to animate component switching, which is to use the Animation tag. The Animation tag is designed specifically to complete animation. By setting the properties of the tag, we can define the start, end, duration and easing function of the animation effect.

The following is an example of using the Animation tag to implement component switching animation:

<template>
  <div class="container">
    <animation :name="aniName" :duration="aniDuration">
      <div v-if="show" class="box"></div>
    </animation>
    <button @click="toggleShow()">toggleShow</button>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.move-enter-active {
  animation: move-enter 1s ease-out;
}

.move-leave-active {
  animation: move-leave 1s ease-in;
}

@keyframes move-enter {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes move-leave {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
</style>

<script>
export default {
  data() {
    return {
      show: true,
      aniName: "",
      aniDuration: 0
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.aniName = this.show ? "move-enter" : "move-leave";
      this.aniDuration = 1000;
    }
  }
}
</script>

In this example, we use two keywords <animation>and<div class="box"></div>. Among them, the name and duration of the animation are defined in the Animation tag. This information will be modified when the button is clicked. On the box element, we use the v-if instruction in Vue to display and hide the element. Outside the box element, we define two class names move-enter-active and move-leave-active to specify which animation effect to use, and set two key frames move-enter and move-leave, stipulating The starting and ending states of the animation effect.

Summary

The above are three methods to implement component switching animation. They each have their own advantages and disadvantages. We can choose the appropriate method according to the project needs. If you want to learn more about cross-platform development, welcome to take Uniapp courses to learn more development skills and methods!

The above is the detailed content of How to set animation when switching components in uniapp. For more information, please follow other related articles on the PHP Chinese website!