82Vue - CSS动画
2023-09-11 14:15:43 时间
CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter
类名在节点插入 DOM 后不会立即删除,而是在animationend
事件触发时删除。
示例: (省略了兼容性前缀)
HTML代码:
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Look at me!</p>
</transition>
</div>
JS代码:
new Vue({
el: '#example-2',
data: {
show: true
}
})
CSS代码:
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
效果图:
相关文章
- CSS动画实例:涡旋
- CSS动画实例:太极图在旋转
- CSS动画实例:Loading加载动画效果(一)
- CSS动画实例:旋转的叶片
- 在Jupyter上不仅看直播视频还玩CSS动画,就是这么炫酷
- 43 JS+Vue3制作动画和钩子函数
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
- svg动画 animate
- 【Css】css中class之间>(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解(转载,笔记用)
- 【Cssflex】css中关于弹性布局flex的综合用法(示例展示)
- Android RecyclerVIew 列表实现 编辑、单选、全选、删除、动画效果(附源码)
- 如何利用 CSS 的动画原理,创作一个乒乓球对打动画
- 纯CSS3绘制神奇宝贝伊布动画特效
- CSS(字体相关知识以及css三种样式表使用方法)
- XamarinAndroid组件教程RecylerView动画组件使用动画(2)
- css动画库
- SwiftUI 动画大全之逐帧动画编程控制播放(教程含源码)
- SwiftUI 高级动画Button按钮之点击后变化载入loading显示等待(教程含源码)
- android中设置Animation 动画效果
- 《Unity开发实战》——3.10节通过循环加载一组材质实现动画纹理(例如模拟视频)
- NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题及VUE提取 CSS 到单个文件
- 【Unity3D插件】iTween插件分享《物体动画插件》
- Android SVG动画PathView源代码解析与使用教程(API 14)
- 【Android动画】之Tween动画 (渐变、缩放、位移、旋转)
- CSS动画 animation与transition
- 利用html5制作一个时钟动画
- 【Unity】动作游戏开发实战详细分析-14-动画事件