记录几个transition动画效果

1.

移动到此条信息，箭头向右边移动显示出来

  <div class="index-module__circle--YkqL1" @click="goToDetails(item.id)">
          <el-icon
            style="margin: 8px 9px 0px; font-size: 17px; font-weight: bold"
            ><ArrowRight
          /></el-icon>
        </div>

.index-module__circle--YkqL1 {
        transition: all 0.3s ease-in-out;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        background-color: #3767ed;
        align-items: center;
        color: #fff;
        justify-content: center;
        flex-shrink: 0;
        position: absolute;
        right: 110px;
        bottom: 80px;
        opacity: 0;
      }

 .item:hover {
      box-shadow: 0 16px 16px 0 rgb(55 69 103/4%);
      cursor: pointer;
      .title {
        color: #3767ed;
      }
      .index-module__circle--YkqL1 {
        opacity: 1;
        right: 70px;
      }
    }

2.

 点击某个分类，分类下面的线从中间向两边缓慢显示出来

  <div
                class="under-line"
                :class="[item.name == barName ? 'under-line-high' : '']"
              ></div>

 .under-line {
            transform: scaleX(0);
            transform-origin: 50% 50%;
            transition: transform 0.5s ease;
            width: 100%;
            margin: 17px auto 0;
            border-bottom: 3px solid #3767ed;
          }
          .under-line-high {
            transform: scaleX(1);
          }

3.

 hover时，小箭头缓慢向右边移动

代码：

  <div class="text">
          查看更多案例<el-icon><ArrowRight /></el-icon>
        </div>

   .text {
      display: flex;
      position: absolute;
      top: 37%;
      left: 25%;
      color: #fff;
      z-index: 2;
      letter-spacing: 2px;
      font-size: 16px;
      cursor: pointer;
      .el-icon {
        margin: 5px 0 0 3px;
        transition: all 0.2s ease;
      }
    }

 .text:hover i {
      display: block;
      transform: translateX(5px);
      transition: all 0.2s ease;
    }

4.

 原始图标是

效果：hover时，箭头平放，向右边缓慢移动一点距离 

 <div class="newsMore" @click="handleMore">
            <span>查看更多新闻资讯</span>
            <i class="iconfont icon-jiantou_qiehuanxiangxia_o"></i>
          </div>

 .iconfont {
        width: 24px;
        height: 24px;
        top: 25px;
        left: -18px;
        font-size: 24px;
        display: inline-block;
        transform: rotate(90deg) scaleY(-1);
        transition: all 0.2s ease;
      }

.newsMore:hover {
      span {
        color: #1e76e3;
      }
      .iconfont {
        color: #1e76e3;
        transform: rotate(90deg) scaleY(-1) translateY(5px);
        transition: all 0.2s ease;
      }
    }