vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865
vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293
Vue动画
使用过渡类名实现一个简单动画
v-enter 【这是一个时间点】，是进入之前，元素的起始状态，此时还没有开始进入
v-leave-to 【这是一个时间点】，是动画离开之后，离开的阻止状态，此时，元素动画已经结束
v-enter-active 【入场动画的时间段】
v-leave-active 【入场动画的时间段】
案例：
<script src="js/vue-2.4.0.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear ;
-ms-transition: all 1s linear;
-o-transition: all 1s linear ;
transition: all 1s linear;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="显示" @click="show">
<transition>
<h3 v-if="flag">{
{
msg}}</h3>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
flag: false
},
methods: {
show() {
this.flag = !this.flag;
}
}
})
</script>
修改并自定义V-前缀
<transition name="my">
<h4 v-if="flag2">我是你爸爸</h4>
</transition>
在transition中添加name属性，并以name 的属性值作为前缀
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateY(100px);
}
.my-enter-active,
.my-leave-active{
transition: all 1s linear;
}
案例：
<script src="js/vue-2.4.0.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100px);
}
.v-enter-active,
.v-leave-active {
transition: all 1s linear;
}
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateY(100px);
}
.my-enter-active,
.my-leave-active{
transition: all 1s linear;
}
</style>
</head>
<body>
<div id=
最低0.47元/天 解锁文章
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
