elementUI内置过渡动画的使用

最新推荐文章于 2022-10-13 17:21:50 发布

imtanqin

最新推荐文章于 2022-10-13 17:21:50 发布

阅读量3.8k

点赞数 1

文章标签： elementui 动画 javascript

本文链接：https://blog.csdn.net/qq_51634332/article/details/121110177

版权

官方文档

内置过渡动画

fade 淡入淡出

<template>
// 提供 el-fade-in-linear 和 el-fade-in 两种效果
// 1. 
<transition name="el-fade-in-linear">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">匀速淡入淡出</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

// 2.
<transition name="el-fade-in">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">淡入淡出</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

缩放效果

<template>
// 提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果
// 1. 
<transition name="el-zoom-in-center">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">向中间缩放</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

// 2.
<transition name="el-zoom-in-top">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">向顶部缩放</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

// 3.
<transition name="el-zoom-in-bottom">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">向底部缩放</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

collapse 展开折叠

<template>
// 提供 el-fade-in-linear 和 el-fade-in 两种效果
// 1. 
<transition name="el-fade-in-linear">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">匀速淡入淡出</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

// 2.
<transition name="el-fade-in">
 <div v-show="show" style="width: 400px; height: 400px; background-color: skyblue">淡入淡出</div>
</transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

collapse 展开折叠

<template>
// 使用 el-collapse-transition 组件实现折叠展开效果
  <el-collapse-transition>  
  		 <div v-show="show">
          <div style="width: 400px; height: 400px; background-color: skyblue">折叠面板 </div>
         </div>
  </el-collapse-transition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

按需引入

// fade/zoom 
import 'element-ui/lib/theme-chalk/base.css'

// collapse 折叠面板 - 全局注册
// main.js
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'

Vue.component(CollapseTransition.name, CollapseTransition)

// xxx.vue
<template>
  <CollapseTransition>  
  		 <div v-show="show">
          <div style="width: 400px; height: 400px; background-color: skyblue">折叠面板 </div>
         </div>
  </CollapseTransition>
</template>
<script>
    export default {
    data: () => ({
      show: true
    })
  }
</script>

// collapse 折叠面板 - 局部注册
// main.js
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'

Vue.component(CollapseTransition.name, CollapseTransition)

// xxx.vue
<template>
  <CollapseTransition>  
  		 <div v-show="show">
          <div style="width: 400px; height: 400px; background-color: skyblue">折叠面板 </div>
         </div>
  </CollapseTransition>
</template>
<script>
import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
export default {
    components: {
    CollapseTransition,
  },
    data: () => ({
      show: true
    })
  }
</script>