<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>transition动画</title>
<!--外链样式表都要加 rel="stylesheet"-->
<link rel="stylesheet" href="lib/animate.css">
<!-- 入场动画:bounceIn 离场动画:bounceOut -->
<style>
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(150px);
color: red;
}
.v-enter-active,.v-leave-active{
/* 过度动画 */
transition:all 0.8s ease;
}
.my-enter{
transform: translateX(150px);
color:blue;
}
.my-leave-to{
transform: translateX(-150px);
}
.my-enter-active,.my-leave-active{
/* 过度动画 */
transition:all 0.8s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击我" @click="isActive=!isActive;msg='66666'" >
<input type="button" value="点击我" @click="isActive=!isActive;msg='88888'" >{{msg}}
<transition>
<div v-show="isActive">{{msg}}</div>
</transition>
<h3 v-show="isActive">我出现啦</h3>
<!-- <transition>要实现动画效果条件:1、component组件的切换;2、标签的要有显示和消失(v-show或v-if) -->
<!-- Vue用动画必须要在这个组件上包一个transition标签 -->
<transition>
<h3 v-show="isActive">我出现啦0</h3>
</transition>
<!-- 在transition 标签上加 name="my" 可以实现多动画 -->
<transition name="my">
<h3 v-show="isActive">我出现啦1</h3>
</transition>
<!-- duration控制动画时间 -->
<!-- 调用animate.css库的动画效果 -->
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="500">
<h3 v-show="isActive">我出现啦2</h3>
</transition>
<!-- 可以将animated加到目标标签上 -->
<transition enter-active-class="bounceInDown" leave-active-class="bounceOutUp" >
<h3 class="animated" v-show="isActive">我出现啦3</h3>
</transition>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >
<h3 v-show="isActive">我出现啦4</h3>
</transition>
</div>
</body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-resource-1.3.4.js"></script>
<script>
var vue= new Vue({
el:"#app",
data:{
isActive:false,
msg:"我来了"
},
methods: {
// el可以不用写
// 用这种方法要标明起始位置和终点位置
// el是带@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"属性的transition标签
beforeCreate(el) {
//设置动画最开始的地方
el.style.transform="translateX(500px)";
},
//这一段没有实际作用,但不写就不会出现动画效果
enter(el,done){
// 可以认为el.offsetWidth会强制动画刷新,可以等价替换为offsetHeight、offsetDown、offsetUp,其他都不行
el.offsetWidth;
el.style.transition="all 2s ease";
//必须要有done()才能调用afterEnter(),可以看作done()=afterEnter
done();
},
//这为动画的终点状态
afterEnter(el){
el.style.transform="translate(0,-500px)";
}
// beforeEnter(el){
// el.style.transform = "translate(0,0)";
// },
// enter(el, done){
// el.offsetWidth;
// el.style.transform = "translate(100px,200px)";
// el.style.transition = "all 2s ease";
// done();
// },
// afterEnter(){
// this.flag = !this.flag;
// }
},
})
//v-enter【起始位置状态】,v-leave to【终点位置状态】
//v-enter-active【开始一瞬间状态】,v-leave-active【终点一瞬间状态】
/*
v-move和v-leave-active一起使用可以实现后续标签的动画效果
v-move{
transition(all 0.8s ease);
}
v-leave-active{
display:absolute;
}
*/
</script>
</html>
VUE动画效果
最新推荐文章于 2024-08-12 21:53:11 发布