How to get the transitions to work

bambinou

Hello,

Quick question please.

I am trying to have this transition:
<q-select
label=“Flip up/down”
transition-show=“flip-up”
transition-hide=“flip-down”
filled
v-model=“model”
:options=“options”
style=“width: 250px”
/>

But it is not working on my page, do I need to import something in my quasar config file please? I cannot find anything in the doc regarding import for this effect here:
https://quasar.dev/options/transitions

This is really the best framework I have ever used for mobile, absolutely superb!

Thank you.

s.molinari

It should work as is. I took your code above and my editor balked with strange eslint errors. It seems you have strange double quote characters. Not sure that is your issue, but you might try copying and pasting this into your code:

    <q-select
      v-model="model"
      label="Flip up-down"
      transition-show="flip-up"
      transition-hide="flip-down"
      filled
      :options="options"
      style="width: 250px"
    />

Scott

metalsadman

@bambinou you need to include the animations in quasar.conf.js animations property, see https://quasar.dev/options/animations#Introduction for the setup.

s.molinari

I thought the same at first, then tested it and the animations don’t need to be added.

https://codesandbox.io/s/codesandbox-app-xjjky

Scott

turigeza

@s-molinari How do you meant to use these transitions ? Possible a dumb question sorry : ) but I was expecting this to work yet it doesn’t.
https://codesandbox.io/s/codesandbox-app-cltpq

<template>
  <q-page>
    <q-btn class="q-ma-xl" color="primary" label="Show / Hide" v-on:click="show = !show"/>
    <div
      v-show="show"
      transition-show="flip-up"
      transition-hide="flip-down"
      style="
        position:absolute;
        top: 100px;
        left: 100px;
        background-color: Salmon;
        width: 200px;
        height: 200px;
        ">
        Hello
        </div>
  </q-page>
</template>

<script>
export default {
  name: 'PageIndex',
  data () {
    return {
      model: null,
      show: false,
      options: [
        'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
      ]
    }
  }
}

</script>

metalsadman

@turigeza not like that, wrap your element inside vue transition tags https://vuejs.org/v2/guide/transitions.html. unless it’s a quasar component with some transition properties like what the op was trying to do with q-select.

turigeza

@metalsadman Thank you, that’s what I have tried before but didn’t work. Obviously missing the point here. Would you be so kind to show me on this pen how it is done. How can one use these https://quasar.dev/options/transitions transitions on simple elements like a div ?
https://codepen.io/turigeza/pen/PrwgpQ

metalsadman

@turigeza like this https://codepen.io/metalsadman/pen/zVxgJq, and it’s in the quasar docs https://quasar.dev/options/animations#Introduction, also read the vuejs link i posted earlier, since transitions is vue related.

turigeza

@metalsadman Thank you for that. You are right it is in there under animations … in fact now I realised I have even used them before although a while back.

bambinou

Thank you so much, I would not have worked it out without you.

No More Posting New Topics!

How to get the transitions to work