<template>
<div class="box">
<h1>vuejs之css过渡与css动画</h1>
<p class="p">
过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换。 <br>
v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。<br>
v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。<br>
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。<br>
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。<br>
v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。<br>
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
</p>
<hr>
<div id="demo">
单元素/组件的过渡
<button v-on:click="show = !show">
显示 / 隐藏
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<hr>
<div id="example-1">
CSS 过渡
<button @click="show1 = !show1">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show1">hello</p>
</transition>
</div>
<hr>
<div id="example-2">
CSS 动画
<button @click="show3 = !show3">Toggle show</button>
<transition name="bounce">
<p v-if="show3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
<hr>
<div id="list-complete-demo" class="demo">
列表的排序过渡
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list-complete" tag="p">
<span
v-for="item in items"
v-bind:key="item"
class="list-complete-item"
>
{{ item }}
</span>
</transition-group>
</div>
</div>
</template>
<script>
export default {
data () {
return {
show: true,
show3: true,
show1: true,
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
}
},
methods: {
change: function () {
for (var i = 1; i < 4; i++) {
this['box_' + i] = Math.random() > 0.5
}
},
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
shuffle: function () {
// this.items = _.shuffle(this.items)
}
}
}
</script>
<style scoped lang="scss">
html,.box{
width: 100%;
height: 100%;
min-height: 960px;
box-sizing: border-box;
background: url('http://online.jd.yumc.pw/_nuxt/img/bgFrontLogin.404f3ee.png') no-repeat;
background-position: center 0;
background-size: cover;
hr{ margin:30px 0;
}
.p{
text-align: left;
padding-left:20%;
}
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.list-complete-item {
transition: all 1s;
display: inline-block;
margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
</style>
vue 动画
最新推荐文章于 2024-07-20 21:43:23 发布