Use uniapp to achieve page transition animation effects

With the rapid development of mobile Internet, more and more programmers are beginning to use uniapp to build cross-platform applications. In mobile application development, page transition animation plays a very important role in upgrading user experience. Through page transition animation, it can effectively enhance the user experience and improve user retention and satisfaction. Therefore, let’s share how to use uniapp to achieve page transition animation effects, and provide specific code examples.

1. Introduction to uniapp

Uniapp is an open source cross-platform application development framework based on the Vue.js framework launched by the DCloud development team. Through uniapp, we can quickly build cross-platform applications and support compilation into WeChat applets, H5 applications, Android applications and iOS applications. uniapp has the advantage of rapid cross-platform development, greatly saving development time and costs.

2. Introduction to page transition animation

Page transition animation is a page effect added to enhance user experience. In the application, transition animation effects can be added at time points such as startup page, entry page, exit page, etc. These effects not only improve the user experience, but also reflect the high quality and user-friendly design of the product.

3. Uniapp implements page transition animation

The uniapp framework provides two life cycle functions (onShow and onHide) and a global configuration item, which can be used to achieve the effect of page transition animation. onShow and onHide are triggered when the page is shown and hidden respectively. You can use these two functions to achieve entry and exit effects. The transition attribute of the global configuration item globalStyle can set the transition animation effect of the entire application page. The following is a detailed introduction to these three ways to implement page transition animation.

1. Use onShow and onHide to achieve page entry and exit effects

By adding a class name to the page, add the entry effect in the onShow life cycle function, and add the exit effect in the onHide life cycle function . The following is an example:

<template>
  <div class="page">
    <h1 id="这是一个页面">这是一个页面</h1>
  </div>
</template>

<script>
export default {
  onShow() {
    this.$el.classList.add('fadeInRight')
  },
  onHide() {
    this.$el.classList.add('fadeOutLeft')
  },
}
</script>

<style>
.fadeInRight-enter-active,
.fadeInRight-leave-active,
.fadeOutLeft-enter-active,
.fadeOutLeft-leave-active {
  animation-duration: 0.3s;
  animation-fill-mode: both;
}

.fadeInRight-enter,
.fadeOutLeft-leave-to {
  transform: translateX(100%);
}

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

2. Global configuration items to implement page transition animation

Through the transition attribute of globalStyle, the global configuration item of uniapp, you can set the transition animation effect of the entire application page. The following is an example:

// main.js
import Vue from 'vue';
import App from './App.vue';

Vue.prototype.$global = {
  transition: 'transition: all 0.3s ease-in-out;', // 设置全局过渡动画
};

const app = new Vue({
  ...App,
});
app.$mount();

3. Use the uni-app plug-in to implement page transition animation

vue-cli-plugin-uni plug-in provides the runtime plug-in of uni-app, allowing the application to The runtime uses a route guard-like approach to handle page transition animations. The following is an example:

const animatePlugin = {
  install(Vue) {
    Vue.prototype.$animate = function(to, from) {
      return new Promise(resolve => {
        const { $el: toEl } = to;
        const { $el: fromEl } = from;

        const onEnd = () => {
          toEl.removeEventListener('animationend', onEnd);

          Object.assign(toEl.style, {
            display: '',
          });
          Object.assign(fromEl.style, {
            display: 'none',
          });

          resolve();
        };

        Object.assign(toEl.style, {
          display: 'block',
          animation: 'page-in .5s ease-out',
        });
        Object.assign(fromEl.style, {
          animation: 'page-out .5s ease-in-out',
        });

        toEl.addEventListener('animationend', onEnd);
      });
    };
  },
};

// main.js
import Vue from 'vue';
import App from './App.vue';
import animatePlugin from './plugins/animate';

Vue.use(animatePlugin);

const app = new Vue({
  ...App,
});
app.$mount();

4. Summary

By using the life cycle functions and global configuration items provided by uniapp, as well as runtime plug-ins, the page transition animation effect can be achieved very conveniently and quickly. In practical applications, different methods can be flexibly used to achieve the transition animation effect of the page according to specific needs and design effects. Although the example provided above is relatively simple, it is enough to prove that uniapp is very suitable for building cross-platform applications, and has rich ecological and plug-in support, making development more efficient and convenient.

The above is the detailed content of Use uniapp to achieve page transition animation effects. For more information, please follow other related articles on the PHP Chinese website!