美文网首页vue2 世界
061_末晨曦Vue技术_过渡 & 动画之自定义过渡的类名

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

作者: 前端末晨曦吖 | 来源:发表于2022-09-02 09:04 被阅读0次

自定义过渡的类名

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

我们可以通过以下 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站一键三连哦!感谢支持!!!

相关文章

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/jqcsnrtx.html