No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. daep93
    3. Best
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 3
    • Best 1
    • Groups 0

    Best posts made by daep93

    • I want use animation with vue cli plugin.

      However, there is no guide for vue cli plugin.

      // quasar.js
      import Vue from 'vue';
      import '@quasar/extras/material-icons/material-icons.css';
      import '@quasar/extras/ionicons-v4/ionicons-v4.css';
      import 'quasar/dist/quasar.css';
      import { Quasar, Loading, QSpinner, Dialog } from 'quasar';
      import * as iconSet from '@quasar/extras/ionicons-v5';
      Vue.prototype.$i = iconSet;
      
      import '@quasar/extras/material-icons/material-icons.css';
      import '@quasar/extras/ionicons-v4/ionicons-v4.css';
      
      Vue.use(Quasar, {
        config: {
          // Quasar Spinning 파트 참조
          loading: {
            spinner: QSpinner,
            spinnerColor: 'teal-10',
            messageColor: 'white',
            message: '<b>Loading...</b>',
          },
        },
        plugins: { Loading, Dialog },
        animations: ['backInLeft', 'backOutLeft', 'fadeIn', 'fadeOut'],
      });
      
      // test.vue
      <transition
              appear
              enter-active-class="animated fadeIn"
              leave-active-class="animated fadeOut"
            >
              <q-icon
                :name="$i.ionCheckmarkCircleOutline"
                color="green"
                style="width:330px;height:330px"
              ></q-icon>
            </transition>
      

      Animation not works! How to fix in?

      posted in Help
      D
      daep93