061_末晨曦Vue技术_过渡 & 动画之自定义过渡的类名

自定义过渡的类名

点击打开视频讲解更加详细

我们可以通过以下 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
1

在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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

完整案例：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！