[FIXED] How to specify a custom transition for QIntersection Quasar

Issue

I have been using QIntersection on Quasar to apply transitions to elements when they are scrolled into the viewport. Lately, I have been feeling the need to specify my own transitions/animations which I define via CSS. At first I used v-intersection directive, managing state manually. That got complex and tedious real fast.

Is there a way to specify my custom CSS transition class in the transition prop, or am I locked in to Quasar embedded ones?

<q-intersection transition="CustomCSSclass?" transition-duration="250">
  <!-- My element goes here -->
<q-intersection>

Solution

If we are talking about Quasar 2 (current release version)...

There is no official way how to use custom transition with components using transition prop (expecting "build-in" transition)

BUT Quasar uses pretty simple system when resolving those transition:

 h(Transition, {
   name: 'q-transition--' + props.transition
 }, getContent)

So for example slide-right transition is using CSS classes .q-transition--slide-right + [ -enter-active, -leave-active etc.). Source

So what you need is to create your own transition CSS classes with the correct name and just use it as if they were build-in Quasar transitions.

Answered By - Michal Levý

Answer Checked By - David Goodson (PHPFixing Volunteer)