效果
1 .https://codepen.io/ainalem/pen/qBWmxoR
2 .很多就是點(diǎn)擊，從一個(gè)位置流暢的切換到另一個(gè)位置，比如acfun手機(jī)客戶端，點(diǎn)擊對應(yīng)頁簽，下面的下劃線會(huì)走到對應(yīng)頁簽下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<style>
.div{
display: flex;
}
.d{
margin-left:50px;
padding: 10px;
border:1px solid blue;
color:blue;
background: #fff;
}
.hover{
border:1px solid red;
position: absolute;
background: blue;
transition:all 0.3s ease-in;
/* opacity: 0; */
}
@keyframes scale {
0%{
transform: scaleY(1);
/* opacity: 1; */
}50%{
transform: scaleY(2);
/* opacity:1; */
}
99%{
/* opacity: 1; */
}
100%{
transform: scaleY(1);
/* opacity: 0; */
}
}
.scale{
animation: scale 0.3s 0.15s 1 ease-in;
}
</style>
</head>
<body>
<div class="div">
<div
v-for="(c,index) in button"
class="d"
@click="handleClick(index,$event)"
:style="methodsStyle(index)"
>
{{c}}
</div>
<div class="hover" :style="computedStyle" :class="scaleClass">
</div>
<!-- 這個(gè)只有把button變成更小的組件才容易實(shí)現(xiàn)功能，現(xiàn)在不寫組件實(shí)現(xiàn)起來有點(diǎn)困難 -->
<!-- 現(xiàn)在做一個(gè)小功能就是，點(diǎn)擊調(diào)到這個(gè)位置就好了 -->
<ul>
<li>
原來的是用到svg來操作，點(diǎn)擊路徑會(huì)變化。
</li>
<li>
現(xiàn)在需要是一邊使用transition,一邊在里面加動(dòng)畫
</li>
<li>
兩個(gè)狀態(tài)，前后位置變化。三個(gè)狀態(tài)：先變大，后變小，回復(fù)原狀。這樣發(fā)現(xiàn)在一個(gè)transition中間加一個(gè)動(dòng)畫，只有先后執(zhí)行順序的，現(xiàn)在是先執(zhí)行動(dòng)畫里面的代碼，然后執(zhí)行transition定義的動(dòng)畫
</li>
<li>
針對第一個(gè)問題，先后變化，我調(diào)整個(gè)動(dòng)畫的延遲執(zhí)行時(shí)間，發(fā)現(xiàn)還是沒有用，反正就是搞不到一起
</li>
<li>
現(xiàn)在就會(huì)出現(xiàn)第二個(gè)問題：變化狀態(tài)無法融合在一起。他們兩個(gè)始終是獨(dú)立的，先變化一個(gè)狀態(tài)，在變化另一個(gè)東西，而且第二個(gè)變化還是在原來的位置變化。所以這么簡單的還是要使用animejs那個(gè)庫。
</li>
</ul>
</div>
<script>
var app=new Vue({
el:".div",
data:{
location:{
},
currentIndex:0,
top:0,
left:0,
width:100,
height:50,
button:["d","d11111111","dasdf"],
scaleClass:[]
},
methods:{
handleClick(index,e){
console.log(e.target.getBoundingClientRect())
console.log(this.location[index])
if(!this.location[index]){
console.log('ok')
this.location[index]={
left:e.target.getBoundingClientRect().left,
top:e.target.getBoundingClientRect().top,
height:e.target.getBoundingClientRect().height,
width:e.target.getBoundingClientRect().width,
}
}
this.top=this.location[index].top
this.left=this.location[index].left
this.width=this.location[index].width
this.height=this.location[index].height
console.log(this.location)
this.scaleClass.push('scale')
setTimeout(()=>{
this.scaleClass=[]
},2000)
},
methodsStyle(index){
console.log('lala')
if(index==this.currentIndex){
return {
color:"#fff",
background:"blue"
}
}
}
},
computed:{
computedStyle(){
return {
transform:`translate(${this.left}px,${this.top}px)`,
width:`${this.width}px`,
height:`${this.height}px`,
}
}
}
})
</script>
</body>
</html>
