自定義過渡的類名

點擊打開視頻講解更加詳細

我們可以通過以下 attribute 來自定義過渡類名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他們的優先順序高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。

首先安裝Animate.css

npm install animate.css -- save

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
//引入ElementUI組件庫
import ElementUI from 'element-ui';
//引入ElementUI全部樣式
import 'element-ui/lib/theme-chalk/index.css';
//引入animate.css動畫庫
import animated from 'animate.css' // npm install animate.css --save安裝，再引入

//插件引入
// import {Plugin1,Plugin2} from './plugins/plugins.js'

// 全局組件註冊  // 第一個解決組件之間的迴圈引用方式
// import HelloWorld from './components/HelloWorld'
// import Category from './components/Category'
// Vue.component('HelloWorld',HelloWorld)
// Vue.component('Category',Category)

Vue.config.productionTip = false

//使用ElementUI
Vue.use(ElementUI)
Vue.use(animated)

// Vue.use(Plugin1,'參數1')
// Vue.use(Plugin2,'參數2')

new Vue({
  store,
  router, 
  render: h => h(App),
}).$mount('#app')

完整案例：

<template>
  <div>
     自定義過渡的類名

      可以通過以下 attribute 來自定義過渡類名：

      enter-class
      enter-active-class
      enter-to-class (2.1.8+)
      leave-class
      leave-active-class
      leave-to-class (2.1.8+)

     安裝Animate.css => npm install animate.css -- save
    <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animate__animated animate__swing"
        leave-active-class="animate__animated animate__flash"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  data(){
    return {
       show:false
    } 
  },
  created(){
    
  },
  mounted() {
    
  },
  computed:{
    
  },
  methods:{
    
  }
}
</script>

<style scoped>

</style>

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！