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;
}