Skip to content

Instantly share code, notes, and snippets.

@ycmjason
Last active June 6, 2019 16:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ycmjason/ea93f9eb1c453a9e36a8536427c59695 to your computer and use it in GitHub Desktop.
Save ycmjason/ea93f9eb1c453a9e36a8536427c59695 to your computer and use it in GitHub Desktop.
<div ref="container">
<Card v-for="(card, i) of cards" ref="cards">
<IntersectionObserver :getTarget="() => this.$refs.cards[i]" @intersect="liftCard" @disintersect="unliftCard" />
...
</Card>
</div>
<!-- vs -->
<div ref="container">
<IntersectionObserver :getTarget="() => this.$refs.cards" @intersect="liftOrUnliftCard" />
<Card v-for="(card, i) of cards">
...
</Card>
</div>
<script>
export default {
methods: {
liftOrUnliftCard (entries) {
entries.filter(({ isIntersecting }) => isIntersecting).forEach(this.liftCard)
entries.filter(({ isIntersecting }) => !isIntersecting).forEach(this.unliftCard)
},
liftCard () { /* lift the card */ },
unliftCard () { /* unlift the card */ },
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment