The QIntersection component is essentially a wrapper over the Intersection directive with the added benefit that it handles the state by itself (does not require you to add it and handle it manually) and can optionally have a show/hide transition as well.
The main benefit of using QIntersection is, however, that the DOM tree is freed up of hidden nodes thus using the minimum possible RAM memory and making the page feel very snappy. As well, you can specify the tag property for the wrapper element to match your own needs, thus eliminating yet another DOM node.
Under the hood, it uses the Intersection Observer API.
WARNING
Not all browsers support the Intersection Observer API. Most modern browsers do, but other browsers do not. If you need to support older browsers, you can install and import (into a boot file) the official W3C polyfill.
Usage
WARNING
In most cases, it is required that you apply CSS to the QIntersection element so that it acts as a necessary filler when the inner content is not rendered. This will allow for a smooth scrolling experience, because otherwise the scroll will jump erratically.
An example of such needed CSS would be, for example, a fixed height or at least a min-height (and possibly even a fixed width, as in the examples below, where multiple QIntersections can be displayed on same row).
WARNING
If using the transition prop, it is required that the content be wrapped in one and only one element.
TIP
There are edge cases where the default viewport won’t work. For instance, when your code is hosted in an iframe (like Codepen). This is where you need to use the root property. It allows you to define an alternative to the viewport as your root (through its DOM element). It is important to keep in mind that root needs to be an ancestor of the observed element.
Basic
With transition
In the example below we used a Quasar transition. For a full list, please head to Transitions page.
Only once
Triggering only once means, however, that you lose the benefit of freeing up the DOM tree. The content will remain in DOM regardless of visibility.
The example below uses the root property and therefore can be seen in a Codepen (which hosts in an iframe).