下拉箭头点击旋转，再次点击旋转恢复

最新推荐文章于 2024-05-28 15:41:28 发布

原创最新推荐文章于 2024-05-28 15:41:28 发布 · 6.1k 阅读

0 ·

CC 4.0 BY-SA版权

css 同时被 2 个专栏收录

26 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

本文介绍了一种在VUE项目中通过改变变量值来控制CSS样式的切换方法，利用这种方式可以实现图标旋转等效果。具体是通过设置变量abc的true或false值来决定是否应用.iconTrans类，从而实现图标旋转180度。

<span :class="{icon: true, iconTrans:abc}"></span>

.icon {
      position: absolute;
      top: 18px;
      right: 10px;
      width: 8px;
      height: 6px;
      background-image: url("../../assets/img/icon-tkxl.png");
      background-repeat: no-repeat;
      -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
    }
    .iconTrans {
      transform: rotate(180deg);
      -webkit-transition: transform .25s linear;
      -moz-transition: transform .25s linear;
      -o-transition: transform .25s linear;
      transition: transform .25s linear;
    }