vue代码敲打沙袋特效
时间: 2024-09-24 14:27:56 浏览: 41
在Vue.js中创建一种敲打沙袋的特效,通常涉及到CSS动画和JavaScript事件处理。以下是一个简单的示例:
```html
<!-- HTML部分 -->
<div class="sandbag" @click="hitSANDBAG"></div>
<!-- CSS部分 -->
<style>
.sandbag {
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
position: relative;
transition: transform 0.3s ease;
}
.hit {
transform: translateY(-10px) rotate(2deg);
}
</style>
<!-- JS部分 (Vue实例) -->
<script>
export default {
name: 'SandbagComponent',
methods: {
hitSANDBAG() {
this.$refs.sandbag.classList.add('hit');
setTimeout(() => {
this.$refs.sandbag.classList.remove('hit');
}, 300); // 模拟打击间隔时间
}
},
mounted() {
this.$refs.sandbag = this.$el; // 给元素添加引用,以便在methods中操作DOM
}
}
</script>
```
在这个例子中,当用户点击沙袋时,会触发`hitSANDBAG`方法。这个方法会给沙袋元素添加`.hit`类,使其向上移动并旋转,模拟击打效果。然后通过`setTimeout`清除这个类,恢复沙袋到原始状态。
阅读全文