vue动画展开折叠_{% if collapse.show %}

<template>
  <div>
      <div>
      <span class="Collapse-button" @click="CollapseShowClick">
        <i class="el-icon-caret-right" :style="CollapseShow?'transform:rotate(90deg)':''"></i>
        <span>Feedback contents</span>
      </span>
       <transition name="el-zoom-in-top" v-if="CollapseShow">
        <div>111</div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      CollapseShow: true,
         
    };
  },
  methods: {
   CollapseShowClick() {
        this.CollapseShow = !this.CollapseShow;
      },
  },
};
</script>

<style  scoped>
.Collapse-button {
  cursor: pointer;
  padding: 10px 0;
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
}
.el-icon-caret-right {
  transition: transform 0.3s;
}

.marging_bottom {
  margin-bottom: 10px;
}
</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