使用uniapp实现页面过渡动画效果

<template><div class="page">    <h1>这是一个页面</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>

// main.jsimport 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();

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.jsimport Vue from 'vue';import App from './App.vue';import animatePlugin from './plugins/animate';Vue.use(animatePlugin);const app = new Vue({  ...App,});app.$mount();