element-ui 隐藏组件 el-collapse-transition使用

el-collapse-transition的引入方式

// fade/zoom 等
import 'element-ui/lib/theme-chalk/base.css';
// collapse 展开折叠
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'

Vue.component(CollapseTransition.name, CollapseTransition)

使用方式

<template>
  <div>
     <div><button @click="cb">切换</button></div>
     <el-collapse-transition>
      <div v-if="show" class="testshow">
        <div>sssssss</div>
        <div>sssssss</div>
        <div>sssssss</div>
        <div>sssssss</div>
        <div>sssssss</div>
      </div>
     </el-collapse-transition>
  </div>
</template>

<script>
export default {
    data: () => ({
      show: true
    }),
    methods: {
      cb() {
        this.show = !this.show;
      },
    }
}
</script>
<style lang="less">
.testshow{
  padding: 10px 10px;
  background-color: aqua;
}
<style>

效果，v-if和v-show都可以