文章目录
1. 路由动画效果
路由动画 =>
利用 transition
组件,我们还可以给路由导航加上动效
// App.vue
<template>
...
<transition name="fade">
<router-view/>
</transition>
...
</template>
<style>
.fade-enter-active {
transition: opacity .5s;
}
.fade-leave-active {
transition: none;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
2. 实例
动画跳转 =>
vue
本身内置动画机制,由一些条件 =>
v-if
、v-show
、根组件、routerView
触发
2.1 example01
routerView
和 动态组件类似,想切换导航组件过程中产生动画效果 => 划屏、透明度变化等等
我们加载在routerView
中,包在其外面,再加一些进进出出的class
样式(透明度变化)即可
\app\src\App.vue
<template>
<div id="app">
<h1>我的主页</h1>
<div id="nav">
<router-link exact to="/">Home</router-link>
<span> | </span>
<router-link to="/about">About</router-link>
<span> | </span>
<router-link to="/user">User</router-link>
<span> | </span>
<router-link to="/book">小说</router-link>
<span> | </span>
<router-link to="/login">Login</router-link>
</div>
<hr />
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
.router-link-active {
color: red;
}
.fade-enter-active {
transition: opacity .5s;
}
.fade-leave-active {
transition: none;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
参考:https://https://github.com/6xiaoDi/blog-vue-Novice/tree/a2.26
Branch: branch06commit description:a2.26(example01——组件路由动画)
tag:a2.26
(后续待补充)