首页 > 其他分享 >243 Adding Route Transitions

243 Adding Route Transitions

时间:2024-10-01 13:48:18浏览次数:8  
标签:Adding Route transition transform leave dialog enter Transitions route

步骤

1、BaseDialog.vue添加动画

添加transition,命名为dialog,添加相关css

<template>
  <teleport to="body">
    <div v-if="show" @click="tryClose" class="backdrop"></div>
    <transition name="dialog">
      <dialog open v-if="show">
        <header>
          <slot name="header">
            <h2>{{ title }}</h2>
          </slot>
        </header>
        <section>
          <slot></slot>
        </section>
        <menu v-if="!fixed">
          <slot name="actions">
            <base-button @click="tryClose">Close</base-button>
          </slot>
        </menu>
      </dialog>
    </transition>
  </teleport>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: false,
    },
    fixed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  emits: ['close'],
  methods: {
    tryClose() {
      if (this.fixed) {
        return;
      }
      this.$emit('close');
    },
  },
};
</script>

<style scoped>
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

dialog {
  position: fixed;
  top: 20vh;
  left: 10%;
  width: 80%;
  z-index: 100;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: white;
}

header {
  background-color: #3a0061;
  color: white;
  width: 100%;
  padding: 1rem;
}

header h2 {
  margin: 0;
}

section {
  padding: 1rem;
}

menu {
  padding: 1rem;
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.dialog-enter-from,
.dialog-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.dialog-enter-active {
  transition: all 0.3s ease-out;
}

.dialog-leave-active {
  transition: all 0.3s ease-in;
}

.dialog-enter-to,
.dialog-leave-from {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 768px) {
  dialog {
    left: calc(50% - 20rem);
    width: 40rem;
  }
}
</style>

2、App.vue改造router-view(注意将被包裹的组件改为单节点才能支持transition)

<template>
    <the-header></the-header>
    <router-view v-slot="slotProps">
      <transition name="route" mode="out-in">
        <component :is="slotProps.Component"></component>
      </transition>
    </router-view>
</template>

<script>
import TheHeader from "./components/layout/TheHeader.vue"

export default {
    components: {
        TheHeader,
    },
 };

</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

html {
  font-family: "Roboto", sans-serif;
}

body {
  margin: 0;
}

.route-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.route-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.route-enter-active{
  transition: all 0.3s ease-out;
}

.route-leave-active {
  transition: all 0.3s ease-in;
}

.route-enter-to,
.route-leave-from{
  opacity: 1;
  transform: translateX(0);
}



</style>

标签:Adding,Route,transition,transform,leave,dialog,enter,Transitions,route
From: https://blog.csdn.net/KevinHuang2088/article/details/142670389

相关文章

  • traceroute命令:路由追踪
    一、命令简介​traceroute​是一个常用的网络诊断工具,用于追踪数据包从源主机到目标主机所经过的路由路径,并显示每一跳的延迟。这个命令可以帮助网络管理员或用户识别网络连接中的问题所在,比如延迟过高、路由故障或者数据包丢失。‍二、命令参数基本用法traceroute[......
  • 掌握 React Router Hooks:综合指南
    reactrouter是在react应用程序中处理导航的重要库。随着reactrouterv6中引入hooks,管理路由变得更加直观和强大。在这篇博文中,我们将探索五个关键的reactrouter钩子,它们可以提升你的路由游戏。1.usenavigate():轻松编程导航usenavigate钩子提供了一个函数,可以通......
  • Vue Router 路由组件传参
    VueRouter路由组件传参基本概念与作用动态路由参数查询字符串参数示例一:使用动态路由参数示例二:使用查询字符串参数示例三:通过路由守卫传递参数示例四:使用命名路由示例五:组合使用多种参数传递方式实际开发中的技巧VueRouter为Vue.js应用提供了完整的路由解决......
  • react-router-dom嵌套路由实践
    想要通过react-router-dom实现类似vue的router-view的嵌套路由效果,在点击导航菜单时切换页面,官方文档是真的没找到相关内容,现做个总结:在createBrowserRouter的配置中配置给目标路由配置子路由;在目标组件的相应位置添加一个<Outlet/>作为子路由的组件渲染容器(Outlet组件类似vue......
  • MISC - 第五天( RouterPassView 路由器密码修复工具,steghide文件隐藏工具,多压缩包伪
    前言各位师傅大家好,我是qmx_07,今天继续讲解MISC相关知识点荷兰宽带数据泄露下载附件,是一个bin后缀的宽带数据文件,使用RouterPassView工具查看现代路由器都会让用户备份一个配置文件,以便重置恢复数据一般配置文件会包含账户名和密码RouterPassView介绍:用于恢复路......
  • vue-router 原理
    前端路由原理hashH5history1.用JS实现hash路由通过hash变化触发路由变化->触发视图更新不会触发页面刷新window.onhashchange2.使用JS实现H5history路由history.pushStatewindow.onpopstate需要后端支持两者怎么选择?......
  • Vue router 4 基础知识讲解
    1.Vuerouter4基础在构建现代Web应用时,单页应用(SPA)因其流畅的用户体验和快速的页面切换能力,成为了众多项目的首选架构。然而,在SPA中,随着应用功能的日益复杂,权限控制成为了一个不可忽视的问题。如何确保不同用户只能访问其被授权的资源,是保障应用安全和数据一致性的......
  • Vuex 和 Vue-router 知识点
    Vuexactions里面才能做异步操作(访问后端APIajax请求访问数据库中的数据)mutations原子操作,同步操作Vue-routermode:history路由配置该怎么配置就怎么配置route:[...]配置:path和component懒加载:component:对应一个函数,import导入这个组件。前面说过用import......
  • 如何使用 React Router DOM
    介绍欢迎来到我们关于reactrouterdom的深入教程!如果您是一名ui开发人员,希望通过动态路由功能增强react应用程序,那么您来对地方了。reactrouterdom是一个功能强大的库,允许您创建具有多个视图的单页面应用程序,同时保持流畅、无缝的用户体验。在这份综合指南中,我们将引导......
  • 使用 React Router v6 进行布局
    第1步:设置reactrouterv6npmi-dreact-router-dom@latest登录后复制第2步:定义路由结构接下来,在app.js文件中定义路由的结构。我们将为主页、关于页面和联系页面创建路由,并将它们与相应的组件关联起来。//app.jsimportreactfrom'react';import{browserroutera......