I want use animation with vue cli plugin.

[daep93]

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?

[beets]

@daep93 I have never used Quasar with vue-cli, but maybe the animations option array doesn’t work in Vue.use ? You could try to just copy / paste the css from here into your own css file:
https://github.com/quasarframework/quasar/blob/dev/extras/animate/fadeIn.css

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}