vue css结合三目运算 过渡效果（width）引发的思考？？？执行机制？？？

一个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>

欢迎帮忙解答
思考，原因先执行改变，再改其样式

解决：
在active外面再加一个这个
span {
width: 0px;
}
总结：此例子css先加载，导致的bug现象，所以一开始需要给span初始值