上の写真のようにCSSトランジション効果が見られます。3つの目を使用するとバグが表示されます。
なぜこのバグが表示されるのかわかりません。下にメッセージを残してください
- 思考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>
考えに答えるのを手伝うことを歓迎します：彼に最初に値を変更させてから、cssサスペンションを実行させます
- 理由1。：f12のスタイル変更を参照できます。最初のホームページスタイルが追加されたので、すべて正常です。後者は、スパンのスタイルがロードされていないため、ホバーを実行してスパン幅を指定しました。直接ですが、幅後退効果（この時点での遷移効果が有効）については、スパンの幅0も直後に応答することを意味します。過剰な効果には、最初のフレームと最後のフレームが必要です。この種のバグ
- 理由2。：原因1が発生する理由：次のコードを確認してください（cssが一時停止され、値を変更するために実行されました）
<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;},
解決策：
アクティブの外側に別の
スパン{ 幅：0px; }を追加します。要約：この例では、cssが最初にロードされ、バグ現象が発生します。過度の効果には初期フレームと終了フレームが必要であるため、の初期値はスパンは最初に指定する必要があります
上記の結論に誤りがある場合は訂正してください。意見が異なる場合は、以下にメッセージを残してください。