transition 属性是一个简写属性，用于设置四个过渡属性。
- CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。
- CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。
属性：
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。
transition原理：
transition动画的实现是依靠css进行控制的,如果页面有多个transition就可以通过修改name属性,分别给不同的transition添加变换样式。
属性有：
<template> <div id="app"> <!-- exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存--> <!-- exclude="Detail"--> <transition :name="trasitionName"> <keep-alive exclude="Detail"> <router-view class="Router" /> </keep-alive> </transition> </div> </template> 对于在过渡中切换的类名来说,如果你使用一个没有名字的 ,就 v-是这些类名的默认前缀。
如果你使用了 ,那么 v-enter 会替换为 my-transition-enter。
3.使用
<template> <div id="app"> <!-- exclude后边跟组件的名字意思就是所除了Detail组件不会被缓存其他都会被缓存--> <!-- exclude="Detail"--> <transition :name="trasitionName"> <keep-alive exclude="Detail"> <router-view class="Router" /> </keep-alive> </transition> </div> </template> <script> export default {
name: "App", data() {
return {
trasitionName: "left-slide", }; }, watch: {
$route(to, from) {
// console.log(to); if (to.name == "Detail") {
this.trasitionName = "slide-left"; } else if (to.name == "home") {
this.trasitionName = "slide-right"; }else{
this.trasitionName = ""; } }, }, }; </script> <style> .Router {
/* transition: all .8s ease; */ position: absolute; left: 0; top: 0; width: 100%; } .slide-left-leave {
opacity: 1; } .slide-left-leave-to {
transform: translateX(-100%); opacity: 0; } .slide-left-enter {
opacity: 0; transform: translateX(100%); } .slide-left-enter-to {
opacity: 1; } .slide-right-leave {
opacity: 1; } .slide-right-leave-to {
transform: translateX(100%); opacity: 0; } .slide-right-enter {
opacity: 0; transform: translateX(-100%); } .slide-left-enter-to {
opacity: 1; } .slide-left-leave-active, .slide-left-enter-active, .slide-right-enter-active, .slide-right-leave-active {
transition: all 0.8s ease; } </style> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207480.html原文链接：https://javaforall.net
