可以使用Vue3的`Intersection Observer` API来实现这个效果。首先，在需要
显示的
元素上添加`ref`引用，以及一个`v-if`指令来控制它的
显示和
隐藏：
```html
<div v-if="showElement" ref="myElement">要
显示的
元素</div>
```
然后，在Vue3组件的`setup()`函数中，使用`ref`来定义一个`Intersection Observer`对象，用来观察
指定元素是否进入或离开了视口。在回调函数中，可以根据
元素的可见性来设置`showElement`的值，从而控制
元素的
显示和
隐藏：
```javascript
import { ref, onMounted } from 'vue'
export default {
setup() {
const observer = ref(null)
const showElement = ref(false)
const options = {
rootMargin: '0px',
threshold: 0.5
}
const callback = (entries, observer) => {
const [entry] = entries
if (entry.isIntersecting) {
showElement.value = true
observer.unobserve(entry.target)
}
}
onMounted(() => {
observer.value = new IntersectionObserver(callback, options)
observer.value.observe(myElement.value)
})
return { showElement, myElement }
}
}
```
最后，为了实现动画效果，可以在
元素上添加一个`transition`属性，以及一个`watch`监听`showElement`的变化，来触发动画：
```html
<template>
<div>
<div v-if="showElement" ref="myElement" class="animate__animated animate__fadeInDown">要
显示的
元素</div>
</div>
</template>
<script>
import { ref, onMounted, watch } from 'vue'
export default {
setup() {
const observer = ref(null)
const showElement = ref(false)
const options = {
rootMargin: '0px',
threshold: 0.5
}
const callback = (entries, observer) => {
const [entry] = entries
if (entry.isIntersecting) {
showElement.value = true
observer.unobserve(entry.target)
}
}
const myElement = ref(null)
onMounted(() => {
observer.value = new IntersectionObserver(callback, options)
observer.value.observe(myElement.value)
})
watch(showElement, (newValue, oldValue) => {
if (oldValue === true && newValue === false) {
myElement.value.classList.remove('animate__fadeInDown')
myElement.value.classList.add('animate__fadeOutUp')
}
else if (oldValue === false && newValue === true) {
myElement.value.classList.remove('animate__fadeOutUp')
myElement.value.classList.add('animate__fadeInDown')
}
})
return { showElement, myElement }
}
}
</script>
<style>
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animate__fadeInDown {
animation-name: fadeInDown;
}
.animate__fadeOutUp {
animation-name: fadeOutUp;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
transform: none;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
</style>
```
这样，当
元素进入视口时，它就会以`fadeInDown`动画
显示出来；当
元素离开视口时，它就会以`fadeOutUp`动画
隐藏起来。
扫一扫
3844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
