浅谈Vue中的动画
使用transition标签
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
css动画原理
</title>
</meta>
<script src="./vue.js" type="text/javascript">
</script>
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition name='fade'>
<div v-show="show">
content
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
}
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
使用keyframes
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
css动画原理keyframes
</title>
</meta>
<script src="./vue.js" type="text/javascript">
</script>
<style>
@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
.in{
transform-origin: left center;
animation: bounce-in 1s;
}
.out{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="app">
<transition enter-active-class='in' leave-active-class='out'>
<div v-show="show">
content
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
}
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
使用animate.css
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
css动画原理animate.css
</title>
</meta>
<link rel="stylesheet" href="./animate.css">
<script src="./vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<transition enter-active-class="animated swing" leave-active-class="animated shake">
<div v-show="show">
content
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
}
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
animat加过渡的一些问题
type="transition" //用于选择动画的持续时间是过渡的时间
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
css动画原理animate.css第一次显示和加过渡
</title>
</meta>
<link rel="stylesheet" href="./animate.css">
<script src="./vue.js" type="text/javascript">
</script>
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade" :duration="{enter:5000,leave:10000}" enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear appear-active-class="animated swing">
<div v-show="show">
content
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
}
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
js动画
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
js动画与velocity.js
</title>
</meta>
<link href="./animate.css" rel="stylesheet">
<script src="./vue.js" type="text/javascript">
</script>
<script src="./velocity.min.js" type="text/javascript"></script>
</link>
</head>
<body>
<div id="app">
<transition @after-enter="handleAfterEnter" @before-enter="handleBeforeEnter" @enter="handleEnter" name="fade">
<div v-show="show">
content
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
},
handleBeforeEnter:function(el){
el.style.color="red";
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color="green";
},2000)
setTimeout(()=>{
done();
},4000)
},
handleAfterEnter:function(el,done){
el.style.color="black";
},
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
js动画与velocity.js
</title>
</meta>
<link href="./animate.css" rel="stylesheet">
<script src="./vue.js" type="text/javascript">
</script>
<script src="./velocity.min.js" type="text/javascript"></script>
</link>
</head>
<body>
<div id="app">
<transition @after-enter="handleAfterEnter" @before-enter="handleBeforeEnter" @enter="handleEnter" name="fade">
<div v-show="show">
content
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
},
handleBeforeEnter:function(el){
el.style.opacity=0;
},
handleEnter:function(el,done){
Velocity(el,{
opacity:1
},{
duration:1000,
complete:done
})
},
handleAfterEnter:function(el,done){
alert("end")
},
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
mode in-out out-in
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
js动画 元素
</title>
</meta>
<link href="./animate.css" rel="stylesheet">
<script src="./vue.js" type="text/javascript">
</script>
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
</link>
</head>
<body>
<div id="app">
<transition name="fade" mode="out-in">
<div v-if="show" key="start">
start
</div>
<div v-else key="end">
end
</div>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(event){
this.show=!this.show;
// event.preventDefault();//阻止了，但是由于点击事件位置的变化，所以效果未成功。
},
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
组件中的动画
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
js动画 组件
</title>
</meta>
<link href="./animate.css" rel="stylesheet">
<script src="./vue.js" type="text/javascript">
</script>
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
</link>
</head>
<body>
<div id="app">
<transition mode="out-in" name="fade">
<component :is="type"></component>
</transition>
<button @click="handleClick">
切换
</button>
</div>
<script>
Vue.component("child-one",{
template:"<div>child-one</div>"
})
Vue.component("child-two",{
template:"<div>child-two</div>"
})
var app=new Vue({
el:"#app",
data:{
type:"child-one"
},
methods:{
handleClick:function(event){
this.type=this.type==='child-one'?"child-two":"child-one";
},
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
列表过渡
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
列表过渡
</title>
</meta>
<link href="./animate.css" rel="stylesheet">
</link>
<script src="./vue.js" type="text/javascript">
</script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition-group>
<div :key="item.id" v-for="(item,index) of list">
{{item.title}}
</div>
</transition-group>
<button @click="handleClick">
Add
</button>
</div>
<script>
var count=0;
var app=new Vue({
el:"#app",
data:{
list:[]
},
methods:{
handleClick:function(event){
this.list.push({
id:count++,
title:"content"
})
},
},
mounted:function(){
document.onselectstart = function(){return false;};
}
})
</script>
</body>
</html>
动画封装
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>
动画封装
</title>
</meta>
<script src="./vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<fade v-show="show">
<div>
content
</div>
</fade>
<fade v-show="show">
<div>
content
</div>
</fade>
<button @click="handleClick">
切换
</button>
</div>
<script>
Vue.component("fade",{
props:["show"],
template:`
<transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<slot v-show="show"></slot>
</transition>
`,
methods:{
handleBeforeEnter:function(el){
el.style.color="red";
},
handleEnter:function(el,done){
setTimeout(()=>{
el.style.color="green";
},2000)
setTimeout(()=>{
done();
},4000)
},
handleAfterEnter:function(el,done){
el.style.color="black";
},
}
})
var app=new Vue({
el:"#app",
data:{
show:false
},
methods:{
handleClick:function(event){
this.show=!this.show;
},
},
})
</script>
</body>
</html>
当然关于动画的内容还有很多，其余更深入的部分可以观看：https://cn.vuejs.org/v2/guide/transitioning-state.html
以上是 浅谈Vue中的动画 的全部内容， 来源链接： utcz.com/z/376517.html
