TA貢獻1966條經(jīng)驗 獲得超4個贊
可以的.
首先分析動畫
動畫有兩個方向,向左向右.這個可以監(jiān)視選中的index,通過比較新舊值來獲得.
用transition組件實現(xiàn)的話,transition組件觸發(fā)的前提是v-show,v-if導(dǎo)致了dom的顯隱.那么我們就需要4個邊框元素來切換顯隱觸發(fā)transition.
DEMO
不用transition組件也可以實現(xiàn)
我們可以用每個item的偽元素通過水平方向的縮放來顯示過渡效果.用transform-origin來控制過渡的方向
控制縮放
.item {
padding: 20px;
background-color: #fff;
position: relative;
&:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background-color: #00f;
transform: scaleX(0);
transition: transform 0.3s;
}
&.active {
&:after {
transform: scaleX(1);
}
}
}
.isLeft {
.item {
&:after {
transform-origin: 0 100%;
}
&.active {
&:after {
transform-origin: 100% 0;
}
}
}
}
.isRight {
.item {
&:after {
transform-origin: 100% 0;
}
&.active {
&:after {
transform-origin: 0 100%;
}
}
}
}
舉報