助人记录1----vue动态类名控制样式实现一个列表切换关闭展开图标

        最近新换了工作，新部门的小姐姐是个大漂亮，小清新，那脸，那嘴，那腰，那腿，阿房宫赋都读过吧？一肌一容，尽态极妍，诸位看官意会一下吧，我不能透露太多。我这个人最爱交朋友，虽然我不会放过任何一个交流的机会，但是有时就是很无奈，机会总是需要一些巧合。

（申明：图文无关） 

        然而，皇天不负有心人，这一天还是让我盼来了，我看她眉头紧锁，似乎有什么烦心事，作为热心市民的我自然不会放弃任何一个挺身而出帮助别人和融入群众的机会，于是我就很顺理成章的出现在她面前，听她在一颦一笑之间娓娓道来。原来，她是有一个展开和收起的图标需求，但是设计公司放的是个死的图，使用以后效果非常的差，怕被我们的女领导（更年期女性）diss。听到这儿，我大致已经明白了怎么回事。

        我让她不用担心，发现问题离得到答案就已经不远了，善意的告诫她不要相信自己的眼睛，手和脑子可以创造很多奇迹，她则表示她拿脑子换美貌了，不太明白我这些说法，于是我顺手接过她手中的鼠标键盘，在她电脑上写下了如下的几行代码，整个过程，行云流水，干净利落，这是技巧，说话聊天可以东拉西扯，但是写代码就得干净利落，一气呵成，编程人的基本修养，我按下ctrl+s一个tab键盘切到浏览器的页面，我甚至都没有调试一下，抬头看妹子已经喜上眉梢，眼神清澈的像丹江口某夫山泉的发源地的水花，缥缈虚无半隐半现的像一幅云里雾里的山水画，看到同仁脸上洋溢的笑容，我已经甜上心头，十年寒窗，挑灯夜战，含辛茹苦终于走上了它该出现的战场，而最重要的事，我在这位同仁心中也有了一个正面的形象，假以时日，或大事可成，诸位看官，青山不改，有进展再更新给你们。

        好了不扯了，我们看看效果，看看代码，学点东西，愉悦身心。

如图所示的图标，非常常见,内容非常简单，直接代码

<template>
  <div>
    <div
      @click="change()"
      style="width: 300px; height: 400px; margin: 40px auto; background: #fff"
    >
      <span :class="{ one: true, 'one-form': bool ? false : true }"></span>
      <span :class="bool ? 'one' : 'two'"></span>
      <span :class="{ one: true, 'three-form': bool ? false : true }"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        //用一个布尔值控制切换
      bool: true,
    };
  },
  methods: {
    change() {
        //每次切换都对当前值取反
      this.bool = !this.bool;
    },
  },
};
</script>

<style   scoped>
.two {
  display: block;
  width: 20px;
  height: 2px;
  background: black;
  margin: 0 auto 5px;
  background: #fff;
}
.one-form {
  transform: rotate(-45deg);
}
.three-form {
  transform: rotate(45deg);
  transform-origin: 20px;
}
.one {
  display: block;
  width: 20px;
  height: 2px;
  background: black;
  margin: 0 auto 5px;
  transform-origin: 20px;
  transition:0.6s cubic-bezier(0.77, 0.2, 0.05, 1),
    opacity 0.65s ease, transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1),
    width 0.5s;
}
// cubic-bezier  贝塞尔曲线，这个动画只是让切换更加流畅，如果不理解，可以去学一学
// 如果不想理解，可以直接删掉
</style>