vue动画
1、使用transition定义动画
//定义过渡的样式/*动画刚开始时的状态，动画结束时的状态*/
.move-enter-active,.move-leave-active{
transition:all 2s;
}
/*动画过渡的css样式*/
.move-enter,.move-leave-to{
opacity:0;
transform:translateX(150px);
}
//使用vue中的transition动画组件
<transition name="move">
<h2 v-if="show" class="title">Hello world...</h2>
</transition>
//创建vue的实例
new Vue({
el: ".box",
data: {
show: true
},
methods: {
toggle() {
this.show = !this.show
}
}
})
2、结合animate.css动画库定义transition动画
使用transition组件，并且定义动画进入（enter-active）时的类名和动画离开（leave-active）时的类名
<div class="box"><transition name="myblock" enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft">
<div v-if="show" class="block"></div>
</transition>
<button @click="toggle">切换</button>
</div>
创建vue实例改变元素的显示与隐藏从而触发动画效果
new Vue({el: ".box",
data: {
show: true
},
methods: {
toggle() {
this.show = !this.show
}
}
})
3、监听vue动画的过渡事件
使用transition定义动画
<div class="box"><transition name="myblock" enter-active-class="animated bounceInRight"
leave-active-class="animated bounceOutLeft"
@before-enter="beforeEnter" <!--动画进入前-->
@enter="enter" <!--动画开始进入-->
@after-enter="afterEnter" <!--动画进入后-->
@before-leave="beforeLeave" <!--动画离开前-->
@leave="leave" <!--动画进开始离开-->
@after-leave="afterLeave"> <!--动画离开后-->
<div v-if="show" class="block"></div> <!--动画进入前-->
</transition>
<button @click="toggle">切换</button>
</div>
创建vue实例
new Vue({el: ".box",
data: {
show: true
},
methods: {
toggle() {
this.show = !this.show
},
beforeEnter() {
alert("开始动画之前.....")
},
enter() {
alert("动画开始......")
},
afterEnter() {
alert("动画结束......")
},
beforeLeave(){
alert("离开之前")
},
leave(){
alert("即将要离开....")
},
afterLeave(){
alert("离开已经结束")
}
}
})
二、vue-router
1、为什么要使用vue-router?
实现SPA(single page application 减少客户端和服务器之间请求加载时间)
<body><div class="box">
<h1>vue-router使用</h1>
<!-- 创建单页应用的导航 -->
<nav>
<!-- vue-router的导航链接 -->
<router-link to="/">主页</router-link>
<router-link to="/hot">热门话题</router-link>
<router-link to="/tech">科技动态</router-link>
<router-link to="/dev">开发者资讯</router-link>
</nav>
<!-- 页面中需要根据导航切换的内容的容器 -->
<router-view></router-view>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
// 定义不同的路由切换时需要显示的内容
// var Hot={template:"<h1>这是热门话题部分</h1>"}
// var Tech={template:"<h1>这是科技动态部分</h1>"}
// var Dev={template:"<h1>这是开发者资讯部分</h1>"}
var Index=Vue.component("Index",{
template:"<h1>这是主页部分</h1>"
})
var Hot=Vue.component("Hot",{
template:"<h1>这是热门话题部分</h1>"
})
var Tech=Vue.component("Tech",{
template:"<h1>这是科技动态部分</h1>"
})
var Dev=Vue.component("Dev",{
template:"<h1>这是开发者资讯部分</h1>"
})
//配置路由规则
var routes=[{
path:"/",
component:Index
},{
path:"/hot",
component:Hot
},{
path:"/tech",
component:Tech
},{
path:"/dev",
component:Dev
}]
//创建vue-router的实例
var router = new VueRouter({
routes:routes
})
//最后将vue-router的实例挂载到vue的实例
new Vue({
el:".box",
router:router
})
</script>
</body>
2、如何使用vue-router
公用style样式
<style>*{
margin:0;
padding:0;
}
body{
font-size:15px;
}
nav{
width: 100%;
height: 45px;
font-size:0;
}
nav>a{
display:inline-block;
height: 45px;
width:25%;
line-height:45px;
box-sizing:border-box;
text-align:center;
font-size:18px;
}
.content{
border:1px solid skyblue ;
text-align:center;
min-height:400px;
}
</style>
01、vue-router路由传参
html结构
<div class="container"><h1 class="text-center text-muted">vue-router使用</h1>
<!-- 创建单页应用的导航 -->
<nav>
<!-- vue-router的导航链接 -->
<router-link to="/AI">热门话题</router-link>
<router-link to="/tech">科技动态</router-link>
<router-link to="/dev/js/3">开发者资讯</router-link>
<router-link to="/user?name=张三&age=22">用户中心</router-link>
</nav>
<!-- 页面中需要根据导航切换的内容的容器 -->
<div class="content">
<router-view></router-view>
</div>
</div>
script结构
<script src="./js/vue.js"></script><script src="./js/vue-router.js"></script>
<script>
// 1、定义不同的路由切换时需要显示的内容
var Hot=Vue.component("Hot",{
template:"<h1>这是热门话题部分,{{$route.params.type}}</h1>",
created:function(){
alert("话题类型:"+this.$route.params.type)
}
})
var Tech=Vue.component("Tech",{
template:"<h1>这是科技动态部分</h1>"
})
var Dev=Vue.component("Dev",{
template:"<h1>这是开发者资讯部分,获取文章的类型:{{$route.params.type}},获取文章的页码:{{$route.params.page}}</h1>"
})
var User=Vue.component("User",{
template:"<div><h1>这是用户中心,{{$route.query.name}},{{$route.query.age}}</h1></div>"
})
//2、配置路由规则
var routes=[{
path:"/:type",
component:Hot
},{
path:"/tech",
component:Tech
},{
path:"/dev/:type/:page",
component:Dev
},{
path:"/user",
component:User
}]
//3、创建vue-router的实例
var router = new VueRouter({
routes:routes
})
//4、最后将vue-router的实例挂载到vue的实例
new Vue({
el:".container",
router
})
</script>
02、vue-router路由嵌套
html结构
<div class="container"><h1 class="text-center text-muted">vue-router使用</h1>
<!-- 创建单页应用的导航 -->
<nav>
<!-- vue-router的导航链接 -->
<router-link to="/">热门话题</router-link>
<router-link to="/tech">科技动态</router-link>
<router-link to="/dev">开发者资讯</router-link>
<router-link to="/user">用户中心</router-link>
</nav>
<!-- 页面中需要根据导航切换的内容的容器 -->
<div class="content">
<router-view></router-view>
</div>
</div>
<template >
<div>
<h1>这是用户中心</h1>
<p>
<router-link class="btn btn-primary" to="/user/login">登录</router-link>
<router-link class="btn btn-success" to="/user/reg">注册</router-link>
</p>
</div>
</template>
script结构
<script src="./js/vue.js"></script><script src="./js/vue-router.js"></script>
<script>
// 1、定义不同的路由切换时需要显示的内容
var Hot=Vue.component("Hot",{
template:"<h1>这是热门话题部分</h1>",
})
var Tech=Vue.component("Tech",{
template:"<h1>这是科技动态部分</h1>"
})
var Dev=Vue.component("Dev",{
template:"<h1>这是开发者资讯部分</h1>"
})
var User=Vue.component("User",{
template:"#user"
})
//定义登录组件
var Login=Vue.component("Login",{
template:"<h1 class='text-center'>这是登录组件</h1>"
})
var Reg=Vue.component("Reg",{
template:"<h1 class='text-center'>这是登录组件</h1>"
})
var NotFound=Vue.component("Error",{
template:"<h1 class='text-center'>404 Page Not Found!</h1>"
})
//2、配置路由规则
var routes=[{
path:"/",
component:Hot
},{
path:"/tech",
component:Tech
},{
path:"/dev",
component:Dev
},{
path:"/user",
component:User,
//配置子路由的路由规则
children:[{
path:"",
component:Login
},{
path:"reg",
component:Reg
}]
},{
path:"*",
component:Error
}]
//3、创建vue-router的实例
var router = new VueRouter({
routes:routes
})
//4、最后将vue-router的实例挂载到vue的实例
new Vue({
el:".container",
router
})
</script>
03、vue-router路由跳转的监听
html结构
<div class="container"><h1 class="text-center text-muted">vue-router使用</h1>
<!-- 创建单页应用的导航 -->
<nav>
<!-- vue-router的导航链接 -->
<router-link to="/">热门话题</router-link>
<router-link to="/tech">科技动态</router-link>
<router-link to="/dev">开发者资讯</router-link>
<router-link to="/user?name=Alice">用户中心</router-link>
</nav>
<!-- 页面中需要根据导航切换的内容的容器 -->
<div class="content">
<router-view></router-view>
</div>
</div>
<template >
<div>
<h1>这是用户中心</h1>
<p>
<router-link class="btn btn-primary" to="/user/">登录</router-link>
<router-link class="btn btn-success" to="/user/reg">注册</router-link>
</p>
<router-view></router-view>
</div>
</template>
script结构
<script src="./js/vue.js"></script><script src="./js/vue-router.js"></script>
<script>
// 1、定义不同的路由切换时需要显示的内容
var Hot=Vue.component("Hot",{
template:"<h1>这是热门话题部分</h1>",
})
var Tech=Vue.component("Tech",{
template:"<h1>这是科技动态部分</h1>"
})
var Dev=Vue.component("Dev",{
template:"<h1>这是开发者资讯部分</h1>"
})
var User=Vue.component("User",{
template:"#user"
})
//定义登录组件
var Login=Vue.component("Login",{
template:"<h1 class='text-center'>这是登录组件</h1>"
})
var Reg=Vue.component("Reg",{
template:"<h1 class='text-center'>这是登录组件</h1>"
})
var Error=Vue.component("Error",{
template:"<h1 class='text-center'>404 Page Not Found!</h1>"
})
//2、配置路由规则
var routes=[{
//name代表组件的名称
name:"主页",
path:"/",
component:Hot
},{
name:"科技动态",
path:"/tech",
component:Tech
},{
name:"开发者资讯",
path:"/dev",
component:Dev
},{
path:"/user",
component:User,
//配置子路由的路由规则
children:[{
name:"登录",
path:"",
component:Login
},{
name:"注册",
path:"reg",
component:Reg
}]
},{
path:"*",
component:Error
}]
//3、创建vue-router的实例
var router = new VueRouter({
routes:routes
})
//4、最后将vue-router的实例挂载到vue的实例
new Vue({
el:".container",
router:router,
watch:{
"$route":function(target,current){
//target代表路由即将要跳转到的目标路径
//current代表当前路由路径
console.log("路由即将要跳转至-->",target)
console.log("当前路由路径是-->",target)
}
}
})
</script>
3、vue-cli
以上是 vue动画 的全部内容， 来源链接： utcz.com/z/380276.html
