animate.css在Vue.js中使用的实例代码
时间: 2023-06-01 11:07:21 浏览: 83
以下是animate.css在Vue.js中使用的实例代码:
<template>
<div>
<h1 v-animate="'fadeInUp'">Animate.css in Vue.js</h1>
</div>
</template>
<script>
import 'animate.css'
export default {
name: 'App',
}
</script>
<style>
h1 {
animation-duration: 3s;
}
</style>
相关问题
vue-cli项目中用vue2引用中scrollreveal结合animate.css完成动画实例
1. 安装scrollreveal和animate.css
```bash
npm install scrollreveal animate.css --save
```
2. 在main.js中引入
```js
import ScrollReveal from 'scrollreveal'
import 'animate.css'
```
3. 在组件中使用
```vue
<template>
<div class="container">
<div class="box" ref="box">
<h2 class="title">ScrollReveal + Animate.css</h2>
<p class="subtitle">Scroll down to see the magic happen!</p>
</div>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
const sr = ScrollReveal()
sr.reveal('.box', {
duration: 2000,
origin: 'top',
distance: '200px',
delay: 500,
easing: 'ease',
reset: true,
viewFactor: 0.5,
afterReveal: (el) => {
el.classList.add('animated', 'bounceIn')
}
})
}
}
</script>
<style>
.container {
height: 300vh;
}
.box {
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.title {
font-size: 4rem;
color: #333;
}
.subtitle {
font-size: 2rem;
color: #666;
margin-top: 2rem;
}
</style>
```
在mounted钩子函数中,我们使用ScrollReveal来实现动画效果。其中,我们设置了元素从顶部出现,距离为200px,持续时间为2s,延迟0.5s,并且在元素出现后添加了bounceIn的animate.css动画效果。
效果如下:
参考文献:
- https://scrollrevealjs.org/guide/hello-world.html
- https://animate.style/#documentation
vue2项目中使用scrollreveal 当元素第二次出现在可视窗口中还能执行animate.css的实例
在使用scrollreveal和animate.css的情况下,元素第二次出现在可视窗口中并不会再次触发animate.css的实例,因为scrollreveal只会在元素第一次出现在可视窗口时触发动画效果。
如果希望元素第二次出现在可视窗口时也能执行animate.css的实例,可以使用一些其他的方法,如监听元素的滚动事件或使用其他的动画库来实现。