vue3中使用animate.css
在Vue 3中使用animate.css,首先确保安装了animate.css:
npm install animate.css
然后,在你的Vue组件中引入animate.css并使用它。这里是一个简单的例子:
<template>
<div>
<button @click="animateBox">Animate Box</button>
<div class="box" :class="{ animate__animated: animate, animate__bounce: animate }"></div>
</div>
</template>
<script>
import 'animate.css';
export default {
data() {
return {
animate: false,
};
},
methods: {
animateBox() {
this.animate = true;
setTimeout(() => {
this.animate = false;
}, 1000);
},
},
};
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
在这个例子中,我们有一个按钮和一个div元素。当按钮被点击时,会触发animateBox
方法,这个方法会给box
元素添加一个动画类(在这个例子中是bounce
)。动画完成后,会移除这个类。
确保你在Vue组件中正确地引入了animate.css,并且在需要应用动画的元素上使用了相应的动画类。你可以根据animate.css库提供的不同动画效果替换animate__bounce
类。
评论已关闭