vue页面跳转添加动画效果，实现页面跳转时左右平推的动画效果

ゞ浴缸里的玫瑰 2022-10-02 05:57 263阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

vue项目，为页面跳转添加动画效果

app.vue文件

<template>
    	<div id="app">
    		<transition :name="transitionName">
    			<router-view></router-view>
    		</transition>
    	</div>
    </template>

return {
    	transitionName: ''
    }
    
    
    watch: {
    	'$route' (to, from) {
    
          }
      }

wa监控路由，往前推：transitionName = slide-left

往后推：transitionName = slide-right

css:左右平推效果

.slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
      will-change: transform;
      transition: all 500ms;
      position: absolute;
    }
    
    .slide-right-enter {
      opacity: 0;
      transform: translateX(-100%);
    }
    
    .slide-right-leave-active {
      opacity: 0;
      transform: translateX(100%);
    }
    
    .slide-left-enter {
      opacity: 0;
      transform: translateX(100%);
    }
    
    .slide-left-leave-active {
      opacity: 0;
      transform: translateX(-100%);
    }

好了，就是这些，有问题再咨询柚子，希望能帮助到一些朋友！！！

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 页面跳转

1.href//跳转刷新页面 @click = jumpCompanyProfile(item.picktextUrl)//参数是后台给的接口 jump

一时失言乱红尘/ 2023年08月17日 15:40/ 0 赞/ 173 阅读

相关 flutter 实现底部tabBar 页面跳转效果

效果图如下：点击底部tabBar切换页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

系统管理员/ 2023年02月18日 09:32/ 0 赞/ 30 阅读

相关 JavaScript模拟列表跳转详情页面效果

JavaScript模拟列表跳转详情页面效果上一篇文章我们讲到如何利用JavaScript中location对象的hash值的改变来实现商品列表跳转到详情页面的效果。然

向右看齐/ 2023年02月16日 06:40/ 0 赞/ 27 阅读

相关 vue页面跳转添加动画效果，实现页面跳转时左右平推的动画效果

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

ゞ浴缸里的玫瑰/ 2022年10月02日 05:57/ 0 赞/ 264 阅读

相关 JQuery ajax页面跳转的效果设置

[JQuery ajax页面跳转的效果设置][JQuery ajax] [$(".content").animate(\{ opacity: 'hide'

梦里梦外;/ 2022年08月08日 06:37/ 0 赞/ 267 阅读

相关 Vue实现页面跳转

![70][]![70 1][] 如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: {

àì夳堔傛蜴生んèń/ 2022年05月22日 06:12/ 0 赞/ 390 阅读

相关 vue.js设置路由跳转时动画效果

app.vue : <template> <div> <router-link :to="/login">Login in <

快来打我*/ 2022年05月14日 12:54/ 0 赞/ 243 阅读

相关 Vue 页面跳转

1.单页面跳转 1.1 无参数-- this.$router.push(path: ' 路由 ') 传递参数 -- this.$router.pus

Bertha 。/ 2022年03月26日 05:05/ 0 赞/ 349 阅读

相关 vue 页面跳转

1.使用 `<router-link>` 创建 a 标签 <router-link to="/city"> <div>跳转</div> </

你的名字/ 2021年12月12日 13:57/ 0 赞/ 432 阅读

相关 Flutter实例——路由跳转的动画效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

朱雀/ 2021年07月25日 18:36/ 0 赞/ 487 阅读