vue 动画 枫叶下落 消失 再显示 代码
时间: 2024-05-08 17:18:34 浏览: 17
好的,以下是一个简单的实现 Vue 动画枫叶下落消失再显示的代码示例:
```
<template>
<div>
<transition name="leaf">
<div v-if="showLeaf" class="leaf"></div>
</transition>
<button @click="toggleLeaf">Toggle Leaf</button>
</div>
</template>
<script>
export default {
data() {
return {
showLeaf: true,
};
},
methods: {
toggleLeaf() {
this.showLeaf = !this.showLeaf;
setTimeout(() => {
this.showLeaf = !this.showLeaf;
}, 700);
},
},
};
</script>
<style>
.leaf {
width: 100px;
height: 100px;
background: url(leaf.png) no-repeat center center / contain;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
animation: leaf-fall 2s ease-in-out forwards;
}
@keyframes leaf-fall {
0% {
transform: translate(-50%, -100%);
}
100% {
transform: translate(-50%, 100%);
opacity: 0;
}
}
/* hover时候抖动 */
.leaf:hover {
animation: leaf-fall 2s ease-in-out forwards, leaf-shake 2s ease-in-out infinite;
}
@keyframes leaf-shake {
0%, 100% {
transform: translate(-50%, 0) rotate(0deg);
}
25%, 75% {
transform: translate(-50%, 2px) rotate(5deg);
}
50% {
transform: translate(-50%, -2px) rotate(-5deg);
}
}
/* 动画过渡效果 */
.leaf-enter-active, .leaf-leave-active {
transition: opacity 0.7s;
}
.leaf-enter, .leaf-leave-to {
opacity: 0;
}
</style>
```
在这个示例中,我们使用 Vue 的过渡动画来实现枫叶的消失和显示。点击按钮时,我们设定一个延迟时间来再次切换 showLeaf 变量,触发过渡动画。
同时,我们也为枫叶添加了一个下落的动画效果,通过 transform 和 opacity 属性的变化实现。我们还添加了一个 hover 时的抖动动画效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)