1.在idea中新建vue项目
2.main.js中修改
// 基础动画
import transition from './transition.vue'
import Vue from 'vue'
new Vue({
el:'#demo',
render:xx => xx(transition)
})
3.src下新建文件transition.vue
<template>
<div> <!--模版中必须有一个这样的根元素-->
<button v-on:click="show =! show">show/hide content</button>
<transition name="fade">
<p v-if="show">I love vue!!!</p>
</transition>
</div>
</template>
<script>
export default {
name: 'demo',
data () {
return{
show:true
}
}
}
</script>
<style scoped> /*scoped作用域,表示只允许vue文件使用,否则便是全局*/
.fade-enter-active , .fade-leave-active{
transition: opacity .5s
}
.fade-enter , .fade-leave-active{
opacity: 0
}
</style>
注意vue组件在main.js 中导入时要加上.vue,引入js文件时可以省略.js
4.index.html中添加
<div id="demo"></div>
只添加这一句就行
运行结果:
vue路由中添加动画:
main.js中修改:
注释基础动画代码,新建文件transitionRouter.js并引入
import Vue from 'vue'
// import Router from './Router' /*引用自同级Router.js*/
// import Router from './SonRouter' /*引用自同级SonRouter.js*/
// import Router from './ComponentRouter' /*引用自同级ComponentRouter.js*/
// import Router from './UrlRouter'
// import Router from './GrandSonRouter'
// import Router from './redirectRouter'
import Router from './transitionRouter'
// 基础动画
// import transition from './transition.vue'
//
// new Vue({
// el:'#demo',
// render:xx => xx(transition)
// })
/*
新建transitionRouter.js文件:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>this is Home</p>
</div>
`
}
const Parent = {
template:`
<div>
<h2>Parent</h2>
<p>this is Parent</p>
</div>
`
}
const router = new VueRouter({
mode:'history',
base: __dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent},
]
})
new Vue({
router,
template:`
<div id="app">
<h1>this is transition</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
</ul>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
`
}).$mount('#app')
为添加CSS路由样式,在index.html的style中添加:
.fade-enter-active , .fade-leave-active{
transition: opacity .5s
}
.fade-enter , .fade-leave-active{
opacity: 0
}
最后查看结果:
watch监控动画:
修改transitionRouter.js,添加watch监控,绑定name
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = {
template:`
<div>
<h2>Home</h2>
<p>this is Home</p>
</div>
`
}
const Parent = {
template:`
<div>
<h2>Parent</h2>
<p>this is Parent</p>
</div>
`
}
const router = new VueRouter({
mode:'history',
data(){
return{
aaa:'fade'
}
},
base: __dirname,
routes:[
{path:'/',component:Home},
{path:'/Parent',component:Parent},
]
})
new Vue({
router,
template:`
<div id="app">
<h1>this is transition</h1>
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/Parent">/Parent</router-link></li>
</ul>
<transition :name="aaa" mode="out-in">
<router-view></router-view>
</transition>
</div>
`,
watch:{
'$route' (to,from){
console.log(to);
console.log(from);
if(from.path == '/Parent'){
this.aaa = 'fade1';
}else{
this.aaa = 'fade2';
}
}
}
}).$mount('#app')
样式在index.html中进行修改:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vuetest</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
a.router-link-active{
color: #f66;
}
li.router-link-active{
color: #f66;
}
.fade1-enter-active , .fade1-leave-active{
transition: opacity .5s
}
.fade1-enter , .fade1-leave-active{
opacity: 0
}
.fade2-enter-active , .fade2-leave-active{
transition: background 0.5s ease-in,color 0.3s ease-out
}
.fade2-enter , .fade2-leave-active{
background-color: #F6F6F6;
color: red;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="demo"></div>
<!-- built files will be auto injected -->
</body>
</html>
最终效果: