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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.