再学vue,33css动画上

原创
2021/05/26 20:33
阅读数 12

CSS动画用法同css过渡一样.只是动画中的类名不会立即删掉,而是在触发animationend后删掉.

<div id="example-2">
<button @click="show = !show">切换呀</button>
<transition name="bounce">
<p v-if="show">
哈哈
</p>
</transition>
</div>

js:

const Demo = {
data() {
return {
show: true
}
}
}

Vue.createApp(Demo).mount('#demo')

css

.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
//省略了`前缀`

自定义过渡类名:enter-from-class enter-active-class enter-to-class leave-from-class leave-active-class leave-to-class

优先级比普通类名高.对vue,及结合Animate.css等,都很方便.

<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css"
rel="stylesheet"
type="text/css"
/>

<div id="demo">
<button @click="show = !show">切换呀</button>
<transition
name="custom-classes-transition"
enter-active-class="animate__animated animate__tada"
leave-active-class="animate__animated animate__bounceOutRight"
>
<p v-if="show">你好</p>
</transition>
</div>

js代码同上.

同时用过渡和动画.

要知道动画的完成,要设置监听器,如transitionend或animationend,单独一种,vue自动识别,并监听.但要两种都使用,则要用type属性设置animation或transition具体监听类型.

显性的过渡持续时间.

vue默认等待transitionend或animationend事件,但也可显性设置:

<transition :duration="1000">...</transition>
//或进入,离开时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>


本人的csdn博客:https://blog.csdn.net/fqbqrr

欢迎关注本人微信公众号

你可以通过https://fqbqrr.blog.csdn.net/article/details/107379697这里访问微信公众号常见内容.

让我们每天都进步一点.


本文分享自微信公众号 - 周三石(gh_6eecda59ada1)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部