一个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初始值

以上结论如果有错误，欢迎指正，有不同看法欢迎在下方留言