vue 标签动态绑定滑动效果

html
思想：通过:class 动态绑定类
再通过transform: translateX(); transition: ;

      <!-- 字体 -->
      <div
        style="display:flex; flex-direction: row; align-items: center;font-size:20px;margin-top:40px"
      >
        <div style=" width: 80px;" @click="showHigh=false">动态参数</div>
        <div class="font1" style="margin-left:30px;width: 80px;" @click="showHigh=true">静态属性</div>
      </div>
      <!-- 线 -->
      <div style=" position: relative;  margin-top: 13px;">
        <div
          style="width: 100%;position: absolute;border: 2px solid gray;"

        ></div>
        <div
          style="width: 80px;position: absolute;border: 2px solid skyblue;"
          :class="showHigh?'donghua1':'donghua2'"
        ></div>
      </div>

css

.donghua1 {
  transform: translateX(108px);
  transition: 0.8s;
}
.donghua2 {
  transform: translateX(0px);
  transition: 0.8s;
}