demo 类定义了初始的样式，元素的宽度和高度都是 100px，背景颜色为红色。
🦋2.3 demo-ani 类
.demo-ani {
animation-name: animation1;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 1s;
animation-fill-mode: forwards;
background-color: red;
width: 100px;
height: 100px;
}
class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
animation-name: animation1：设置元素的动画为之前定义的 animation1，即上面定义的 @keyframes 动画。animation-duration: 3s：设置动画的总时长为 3 秒。animation-timing-function: ease-in-out：设置动画的时间函数为 ease-in-out，意味着动画开始和结束时会有缓慢的过渡。animation-direction: alternate：使动画在完成一个周期后反向播放，即先从 0% 到 100%，再从 100% 到 0%，不断交替。animation-iteration-count: infinite：设置动画无限循环播放。animation-play-state: running：设置动画的播放状态为运行。animation-delay: 1s：设置动画在 1 秒后开始播放。animation-fill-mode: forwards：设置动画完成后元素会保持动画结束时的状态。
🔎3. Vue 部分
const App = Vue.createApp({
data() {
return {
cls: "demo"
};
},
methods: {
run() {
if (this.cls == "demo") {
this.cls = "demo-ani";
} else {
this.cls = "demo";
}
}
}
});
App.mount("#Application");
class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
-
data()：data 返回一个对象，其中有一个属性 cls，初始值是 "demo"，即 div 元素开始时使用 demo 类。
-
methods：定义了一个 run 方法，功能是切换 cls 的值：
- 如果当前
cls 是 demo，则将其切换为 demo-ani，从而触发 CSS 动画。 - 如果当前
cls 是 demo-ani，则将其切换回 demo，使动画停止。
这个方法通过 Vue 的响应式系统使得 div 元素的类名发生变化，从而触发元素的样式和动画效果。
-
App.mount("#Application")：将 Vue 应用挂载到页面中 id 为 Application 的元素上。
🔎4. 交互流程
-
初始状态：
- 页面加载时，
div 元素的 class 被设置为 "demo"，即该元素的初始状态是 100px × 100px 的红色方块。 - 此时，CSS 动画不会启动，因为元素的类名是
demo，没有应用任何动画。
-
点击事件：
- 当用户点击
div 元素时，run 方法被调用。此时，cls 的值从 "demo" 切换到 "demo-ani"，意味着元素的类名发生了变化。 - 切换到
demo-ani 后，div 元素会开始应用 demo-ani 类中的关键帧动画（@keyframes animation1），使得元素从红色变为紫色、绿色、蓝色，大小也发生变化，动画持续 3 秒，并且每次动画完成后会反向播放。
-
动画效果：
- 由于
animation-direction 设置为 alternate，动画会在每次播放完毕后反向执行，即先从 0% 到 100%，再从 100% 到 0%，这使得动画不断循环。 animation-iteration-count: infinite 保证动画会无限次播放。animation-fill-mode: forwards 确保动画结束后，元素保持动画结束时的状态。
-
切换回初始状态：
- 如果点击时
cls 已经是 demo-ani，则它会切换回 demo 类，动画会停止，元素恢复到初始状态（100px × 100px 的红色方块）。
🔎5. 总结
这段代码通过 Vue 3 和 CSS 关键帧动画实现了一个动态的交互效果：
- 使用
@keyframes 定义了一个复杂的动画，控制元素的颜色和大小变化。 - Vue 负责在用户点击时切换
div 的类名，通过响应式绑定触发 CSS 动画。 - 通过
animation-direction: alternate 和 animation-iteration-count: infinite 让动画不断循环并反向播放。
这是一种非常适合学习 CSS 动画与 Vue 的交互方式的示例，展示了如何结合 Vue 的数据绑定和 CSS 动画来实现灵活的用户界面效果。
id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"> class="blog_extension blog_extension_type1" id="blog_extension">
class="blog_extension_card" data-report-click="{"spm":"1001.2101.3001.6470"}">
class="blog_extension_card_left">
class="blog_extension_card_cont">
class="blog_extension_card_cont_l">
愚公搬代码
class="blog_extension_card_cont_r">
微信公众号
汇集各种IT相关知识传播
评论记录：
回复评论：