[v1] Problem with transitions other than fade

[labs20]

Hi.

First things first: quasar.conf

        animations: 'all', // --- includes all animations
        /*animations: [
            'fadeIn',
            'fadeOut',
            'slideRight',
            'slideLeft',
            'rotate',
        ],*/

If I do this, my preview fades in and out nicely as expected:

transition(
    :duration="2000"
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut" 
)
    .preview.absolute-bottom.absolute-center(v-show="!preview.hidden" key="prev1")
         img.bordered.fit(:src="preview.thumb" key="prev2")

But any other of the tries below do not work. No animation at all:

transition(
    :duration="2000"
    enter-active-class="animated jumpUp"
    leave-active-class="animated jumpDown"
)

transition(
    :duration="2000"
    enter-active-class="animated rotate"
    leave-active-class="animated rotate"
)

transition(
    :duration="2000"
    enter-active-class="animated slideUp"
    leave-active-class="animated slideDown"
)

What am I doing wrong here?

Thanks

[s.molinari]

@labs20 - None of those animations exist in animate.css. Take a look at the drop down on this page for the list of available animations.

https://daneden.github.io/animate.css/

(In fact, the “slideRight”, “slideLeft” and “rotate” animations mentioned in the quasar.conf.js are non-existent too. :o)

Scott

[labs20]

Well, but those are animations mentioned here: https://quasar.dev/options/transitions

I think they should be available across the framework, or it should be stated on the docs otherwise.

[metalsadman]

@labs20 it’s documented https://quasar.dev/options/animations. as for examples, old docs has it https://v0-17.quasar-framework.org/components/transition.html.

[labs20]

@metalsadman said in [v1] Problem with transitions other than fade:

@labs20 it’s documented https://quasar.dev/options/animations. as for examples, old docs has it https://v0-17.quasar-framework.org/components/transition.html.

Hi.

For all I’ve read @ https://quasar.dev/options/animations I can only assume that I could be using those ‘jumpUp’ anims:

 Quasar can supply a big list of ready to use CSS animations

Anyway, it would be nice have those anims ready to use among the AnimateCSS ones.

Thanks!

[metalsadman]

@labs20 well it’s not limited to that, if you read vue transition section then you’ll know you can use whatever animation/transition may it be a from a js or css. https://vuejs.org/v2/guide/transitions.html. the links were provided in the quasar docs, there’s probably a good reason why not a lot of animations were packed in quasar itself. based on the docs if you have the css for what animation you wanted, you should be able to integrate it imho.

[s.molinari]

Ok. I realize now where the confusion is coming from. Quasar has its own q-transition animations for things like QImg (like in the docs under “Quasar Component Transitions”) and other components, like QDialog, which use transitions.

For the Vue transitions, Animate.css animations are only available.

I hope that is understandable.

Scott

[labs20]

Yes. It’s clear now. I just think that’s not good.

You should be able to use the q-transitions class seamlessly IMHO.

Thanks