vue中transition动画（移动端页面切换左右滑动效果）

例子一：（简单进入和离开动画）

demo1

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
      <h1 v-show="!isShow" key="1">vue2！</h1>
      <h1 v-show="isShow" key="2">VUE3！</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      isShow: true
    }
  },
}
</script>

<style scoped>
h1 {
  color: #fff;
  background-color: rgb(27, 247, 255);
}
/* 进入的起点、离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
.hello-enter-active,
.hello-leave-active {
  transition: 0.5s linear;
}
/* 进入的终点、离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translateX(0);
}
</style>

demo1

<!--
 * @Description: 
 * @Author: Ran junlin
 * @Date: 2021-09-24 14:07:16
 * @LastEditTime: 2022-02-10 17:29:28
 * @LastEditors: Ran junlin
-->
<template>
  <div id="app">
    <h2>pubsub中间件消息订阅：</h2>
    <hr />
    <v-hello />
    <v-add />
    <hr />
    <h1>动画</h1>
    <button @click="isShow = !isShow">点击显示/隐藏</button>
    <transition name="myHello" appear mode="in-out">
      <div v-show="isShow" class="demio">hello vue !</div>
    </transition>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
import vAdd from '@/components/v-add'
import vHello from '@/components/v-hello'
export default {
  name: 'App',
  components: {
    vHello,
    vAdd
  },
  data () {
    return {
      pubId: '',
      isShow: true
    }
  },
  created () {
  },
  mounted () {
    // 消息订阅
    this.pubId = pubsub.subscribe('hello', (name, data) => {
      console.log('有人发布了消息，消息发布回调执行', name, data);
    })
  },
  beforeDestroy () {
    pubsub.unsubscribe(this.pubId)
  },
  methods: {
  },
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 600px;
}
* {
  touch-action: pan-y;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#container {
  margin: 0 auto;
  width: 1500px;
  height: 1000px;
}
.demio {
  margin: 20px auto;
  width: 80%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  font-size: 50px;
  background-color: rgb(94, 245, 182);
}

.myHello-enter-active {
  animation: showHello 0.5s linear;
}
.myHello-leave-active {
  animation: showHello 0.5s linear reverse;
}
@keyframes showHello {
  from {
    transform: translateX(-100%);
    transform: scaleX(0.2);
  }
  to {
    transform: translateX(-100%);
    transform: scaleX(1.1);
  }
}
</style>

例子二：（移动端上页面进入和离去动画）

<template>
<div id="app">
  <transition :name="animation" mode="in-out" appear>
      <router-view class="global-router" />
  </transition>
</div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      animation: ''
    };
  },
  watch: {
    $route(to, from) {
      wexinShare()
      if (!from.meta.pageNum=== undefined) {
        this.animation = 'none';
      } else {
        this.animation = to.meta.pageNum> from.meta.pageNum? 'left' : 'right';
      }
    }
  },
};
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-size: 15px;
}
</style><style lang="less" scoped>
.global-router {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.left-enter {
  transform: translateX(100%);
}

.right-enter {
  transform: translateX(-100%);
}

.left-enter-active,
.right-enter-active {
  position: relative;
  z-index: 999;
  transition: all 0.4s;
}

.left-leave-active,
.right-leave-active {
  position: relative;
  z-index: -1;
}
</style>

例子三：（利用第三方css库 Animate）

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">超级管理员！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	

</style>```