vue2项目中使用scrollreveal 当元素第二次出现在可视窗口中还能执行animate.css的实例
时间: 2023-05-29 11:05:59 浏览: 52
在使用scrollreveal和animate.css的情况下,元素第二次出现在可视窗口中并不会再次触发animate.css的实例,因为scrollreveal只会在元素第一次出现在可视窗口时触发动画效果。
如果希望元素第二次出现在可视窗口时也能执行animate.css的实例,可以使用一些其他的方法,如监听元素的滚动事件或使用其他的动画库来实现。
相关问题
vue2项目当元素第二次出现在可视窗口中还能执行animate.css动画 代码怎么写
可以通过监听元素是否进入可视窗口,并添加相应的class来触发animate.css动画。
在Vue2中,可以使用vue-waypoint插件来实现监听元素是否进入可视窗口的功能。
1. 安装vue-waypoint插件
```
npm install vue-waypoint --save
```
2. 在组件中引入vue-waypoint插件
```
import Waypoint from 'vue-waypoint'
export default {
components: {
Waypoint
},
...
}
```
3. 在元素上添加waypoint组件,并设置触发进入可视窗口的回调函数
```
<template>
<div>
<div class="box" v-waypoint="onWaypoint">
...
</div>
</div>
</template>
<script>
import Waypoint from 'vue-waypoint'
export default {
components: {
Waypoint
},
methods: {
onWaypoint (direction) {
if (direction === 'down') {
// 元素进入可视窗口
this.$refs.box.classList.add('animated', 'bounceIn')
}
}
}
}
</script>
```
在上面的代码中,我们在box元素上添加了v-waypoint指令,并绑定了一个回调函数onWaypoint。当box元素进入可视窗口时,回调函数会被执行,我们可以在回调函数中添加相应的class来触发animate.css动画。
需要注意的是,在回调函数中我们判断了元素进入可视窗口的方向,这是为了防止动画重复触发。如果不加这个判断,元素离开可视窗口后再次进入时会重新触发动画。
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
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)