¿Está pensando en el efecto de transición (ancho) de vue css combinado con el cálculo trinocular? ? ? ¿Mecanismo de implementación? ? ?

Se

puede ver un efecto de transición CSS como se muestra en la imagen de arriba. Después de usar los tres ojos, aparecerá un error. No
sé por qué aparece este error. Deje un mensaje a continuación.

• Pensamiento 1: primero cambie el valor y luego cambie su estilo. El
  motivo se encuentra al final del artículo. Es posible que el código no sea el
  siguiente:

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

Bienvenido para ayudar a responder el
pensamiento : déjelo cambiar el valor primero y luego ejecute la suspensión css

• Razón 1 : Puede consultar los cambios de estilo en f12. Se ha agregado el primer estilo de la página de inicio, por lo que todo es normal. El último es que el estilo en el intervalo no se ha cargado, por lo que ejecuté el desplazamiento y le di el ancho del intervalo. directamente, pero ver el efecto de retroceso de ancho (el efecto de transición en este momento es efectivo), significa que el ancho 0 del tramo también responde inmediatamente después. El efecto excesivo debe tener el marco inicial y el marco final, lo que lleva a este tipo de error
• Razón 2 .: ¿Por qué causaría la causa 1? Mire el siguiente código (css ha sido suspendido y luego ejecutado para modificar el valor)

<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;},

Solución :
agregue otro
intervalo { ancho: 0px; } fuera de activo . Resumen : En este ejemplo, CSS se carga primero, lo que provoca un fenómeno de error, y el efecto excesivo debe tener un marco inicial y un marco final, por lo que el valor inicial de el lapso debe darse al principio

Si hay errores en las conclusiones anteriores, corríjame. Si tiene opiniones diferentes, deje un mensaje a continuación.