一個css 過渡效果
如上圖可以看出，用了三目之后，就會出現bug
不知為啥出現這個bug，需要好心人在下面留言
思考1：原因先更改值，再改其樣式
原因在文末，可能不全對
代碼如下：
<template>
<div id="app">
<div class="container">
<div class="item_list">
:class="{ active: value == i ? true : '' }"
<ul class="item">
<li
class="li"
:class="{ active: value == i ? true : '' }"
@mouseenter="enter(i)"
v-for="(item, i) in item_list"
:key="i"
>
{{ item }}<span></span>
</li>
</ul>
:class="{ active: true }"
<ul class="item">
<li
class="li"
:class="{ active: true }"
@mouseenter="enter(i)"
v-for="(item, i) in item_list"
:key="i"
>
{{ item }}<span></span>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: 0,
item_list: ["首頁", "關于", "新聞", "技術支持"],
};
},
methods: {
enter(val) {
this.value = val;
},
},
};
</script>
<style lang="scss">
* {
text-decoration: none;
list-style: none;
}
#app {
.container {
width: 1200px;
margin: 0 auto;
background: #e5e5e5;
height: auto;
.item_list {
.item {
display: flex;
justify-content: space-around;
.li {
position: relative;
}
}
}
}
.active {
span {
position: absolute;
width: 0px;
height: 5px;
background: #000;
bottom: -20px;
left: -20px;
transition: width 2s;
}
&:hover span {
width: 100px;
}
}
}
</style>
歡迎幫忙解答
思考：讓他先更改value ，再執行css懸浮
原因1.：可以參考f12里面的樣式變化，第一個首頁樣式已經加了上去，所以一切正常，后面的是span里面的樣式還沒加載，就先執行了hover直接給了span寬度，但看到寬度回退效果（此時的過渡效果有生效），說明span的0寬度也緊隨其后回應，過度效果必須有初始幀與結尾幀,因此導致這種bug
原因2.：為啥會導致原因1，看下面代碼(已經css懸浮，再執行了修改value)
<li class="li":class="{ active: value == i ? true : '' }"
mouseenter="enter(i)"v-for="(item, i) in item_list":key="i">
enter(val) {this.value = val;},
解決：
在active外面再加一個這個
span {
width: 0px;
}
總結：此例子css先加載，導致的bug現象，并且過度效果必須有初始幀與結尾幀，所以一開始需要給span初始值
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249917.html
標籤：其他
上一篇：jQuery簡單影片操作