效果
1 .https://codepen.io/ainalem/pen/qBWmxoR
2 .很多就是点击，从一个位置流畅的切换到另一个位置，比如acfun手机客户端，点击对应页签，下面的下划线会走到对应页签下面
<!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>
<!-- 这个只有把button变成更小的组件才容易实现功能，现在不写组件实现起来有点困难 -->
<!-- 现在做一个小功能就是，点击调到这个位置就好了 -->
<ul>
<li>
原来的是用到svg来操作，点击路径会变化。
</li>
<li>
现在需要是一边使用transition,一边在里面加动画
</li>
<li>
两个状态，前后位置变化。三个状态：先变大，后变小，回复原状。这样发现在一个transition中间加一个动画，只有先后执行顺序的，现在是先执行动画里面的代码，然后执行transition定义的动画
</li>
<li>
针对第一个问题，先后变化，我调整个动画的延迟执行时间，发现还是没有用，反正就是搞不到一起
</li>
<li>
现在就会出现第二个问题：变化状态无法融合在一起。他们两个始终是独立的，先变化一个状态，在变化另一个东西，而且第二个变化还是在原来的位置变化。所以这么简单的还是要使用animejs那个库。
</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>
