700字范文 > vue中transition动画（移动端页面切换左右滑动效果）

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

时间：2023-10-18 05:59:08

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

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

<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 appearname="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>```

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。