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

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 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>```

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

vue中使用动画vue-particles实现背景粒子酷炫效果
参考官网:https://vue-particles.netlify.com/ 安装插件 npm install vue-particles --save-dev 在main.js中引入 import ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
Vue基础实现bilibili移动端页面
Vue基础实现bilibili移动端页面一.Vue基础实现bilibili移动端页面一.Vue基础实现bilibili移动端页面简述:对于已经学到vue的同学,bilibili的页面布置难度不大 ...
在vue中使用flexible---移动端适配
在vue中使用flexible-移动端适配配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flex ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
Vue+Element实现tab页多页面切换
效果图GIF 源码地址 https://gitee.com/marlife/nav-tags.git 已经上传到Gitee(码云),代码拉下来之后: 1.执行安装命令:npm install 2.执行 ...
解决移动端scrollTo({behavior: “smooth“})滑动效果失效的问题
js自带的scrollTo方法可以设置动画,滚动的效果,代码在电脑上正常,但是在手机上的时候就没有smooth的滑动效果了,只能僵硬的跳到某个位置,类似scrollTop赋值的效果,这里从一个博客看到 ...

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

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

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

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

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

最新文章

热门文章

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

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

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

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

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

最新文章

热门文章

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