点击三角形，展开或者收起内容
<template><div><div class="zhankai" @click="btn()">展开 <span :class="{'sanjiao':true,'rotate':flag}"></span></div><!-- 展示或者收起 --><el-collapse-transition><div v-show="flag">123321213321312</div></el-collapse-transition></div>
</template><script>
export default {data () {return {flag: true}},methods: {btn () {this.flag = !this.flag}}
}
</script><style lang="less" scoped>
.zhankai {margin-left: 100px;position: relative;.sanjiao {width: 0;height: 0;border-style: solid;border-width: 0 4px 6px 4px;border-color: transparent transparent #333 transparent;position: absolute;left: 36px;top: 50%;transform: translate(-50%, -50%);transition: transform 0.3s ease-in-out;}.rotate {transform: translate(-50%, -50%) rotate(180deg);}&:hover {color: #1890ff;.sanjiao {border-color: transparent transparent #1890ff transparent;}// 只要滑过三角形就旋转，放开这个代码// .rotate {// transform: translate(-50%, -50%) rotate(180deg);// }}
}
</style>
)
