PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Sunday, October 16, 2022

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

 October 16, 2022     css, quasar, transition, vue.js     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing