Vue_动画

动画的理解

1) 操作 css 的 trasition(过渡) 或 animation(动画)

2) vue 会给目标元素添加/移除特定的 class

3) 过渡的相关类名

    xxx-enter-active: 指定显示的 transition

    xxx-leave-active: 指定隐藏的 transition

    xxx-enter/xxx-leave-to: 指定隐藏时的样式

编码1:

<style>
.fade-enter-active, .fade-leave-active {    //显示/隐藏时的过渡效果
transition: opacity .5s    //过渡时候改变的元素opacity    .5s持续时间
}
.fade-enter, .fade-leave-to {    //进入之前和离开之后,其实就是隐藏时的样式
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 {
transform: translateX(10px);
opacity: 0;
}
</style>
<div id="demo1">
<button @click="show = !show">
Toggle1
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="demo2">
<button @click="show = !show">
Toggle2
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script>

编码2:

<style>
.bounce-enter-active {
animation: bounce-in 1s;
}
.bounce-leave-active {
animation: bounce-in 1s reverse;    //reverse颠倒
}
@keyframes bounce-in {
0% {transform: scale(0);    //动画持续时间为1s,当0s的时候,没有显示
}
50% {transform: scale(1.5);    //当0.5s的时候,放大1.5倍
}
100% {transform: scale(1);    //当1s结束的时候,显示为原始大小
}
}
</style>
<div id="test2">
<button @click="show = !show">Toggle show</button>


<transition name="bounce">
<p v-if="show" style="display: inline-block">Look at me!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#test2',
data: {
show: true
}
})
</script>

 

发布了19 篇原创文章 · 获赞 24 · 访问量 1545
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览