专栏首页前端开发随笔Vue Router路径切换过渡动画

Vue Router路径切换过渡动画

实现简单的页面切换淡入淡出效果

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
#app {
  margin: 0;
  padding: 0;
}
.fade-enter-active,
.fade-leave-avtive {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序editor富文本编辑

    wePanda
  • Js时间戳倒计时天时分秒

    wePanda
  • NodeJs引入操作第三方插件

    需要安装第三方模块,可以去npmjs.com地址去查找官方地址,全球最大的包管理器 这里以安装md5为例

    wePanda
  • 让push跳转动画像modal跳转动画那样效果(从下往上推上来)

    程序员不务正业
  • transition 属性

    transition 是一个简写属性,可设置 transition-property, transition-duration, transition-ti...

    Html5知典
  • shell介绍,命令历史,命令不全和别名,通配符以及输出重定向

    叶瑾
  • Golang 包管理(一)

    我们在使用其他语言,比如Java,是有包的概念的,它是Java语言中组织我们的Java文件的一个概念,比如java.lang这个包,他里面有很多我们常用的类,比...

    爱敲代码的猫
  • 正则表达式快速入门

    6月进入前端技术的学习,正则算是跳不过的一个坎了,这部分没有太多需要理解的内容,知道就是王道。 ? ? 正则表达式(Regular Expression):在...

    用户1216676
  • SpringBoot 笔记 ( 二 ):自定义配置

    SpringBoot 笔记 ( 二 ) 1. 配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的: application.propert...

    lwen
  • Go 每日一库之 twirp

    twirp是一个基于 Google Protobuf 的 RPC 框架。twirp通过在.proto文件中定义服务,然后自动生产服务器和客户端的代码。让我们可以...

    用户7731323

扫码关注云+社区

领取腾讯云代金券