为什么这两个元素不能同时转换？

Question

我有一个包含2个伪元素（.card-title::before和.card-title::after）的元素，其转换将宽度从0px更改为40px。

原始转换速度为0.5秒，但出于演示目的，我将其更改为15秒，以便您可以清楚地看到::before伪元素在::after之前开始。

如果您没有看到，请尝试在整页中打开代码段。

为什么会这样，我该如何解决？

我可以通过向::before添加非常短（如0.05s）的延迟来解决这个问题，但我认为你可以理解为什么我不喜欢这个想法。

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #eee;
}

.card {
	height: 100px;
	width: 100px;
}

.card-body {
	color: white;
	height: 100%;
	background: #777;
}

.card-title {
	position: relative;
	background: yellow;
	height: 45px;
}

.card-title::before {
	content: '';
	position: absolute;
	background: red;
	width: 0;
	top: 0;
	bottom: 0;
	right: 100%;
	z-index: -1;
	transition: width 15s linear;
}

.card-title::after {
	content: '';
	position: absolute;
	background: red;
	width: 0;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: -1;
	transition: width 15s linear;
}

/* Hover effect */
.card-body:hover .card-title::before,
.card-body:hover .card-title::after {
	width: 40px;
}

<div class="card">
	<div class="card-body">
		<h3 class="card-title"></h3>
	</div>
</div>

Answer 1

我不确定，但你的问题可能是由于一个舍入问题造成的，一个过渡向下舍入一个像素，一个向上舍入。

但是，您可以使用transform: scaleX(1);从使用更改宽度切换到调整比例，无论如何都更高效。以下适用于Chrome和Firefox。

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	background: #eee;
}

.card {
	height: 100px;
	width: 100px;
}

.card-body {
	color: white;
	height: 100%;
	background: #777;
}

.card-title {
	position: relative;
	background: yellow;
	height: 45px;
}

.card-title::before {
	content: '';
	position: absolute;
	background: red;
	width: 40px;
	top: 0;
	bottom: 0;
	right: 100%;
	z-index: -1;
	transition: transform 15s linear;
	transform: scaleX(0);
	transform-origin: right;
}

.card-title::after {
	content: '';
	position: absolute;
	background: red;
	width: 40px;
	top: 0;
	bottom: 0;
	left: 100%;
	z-index: -1;
	transition: transform 15s linear;
	transform: scaleX(0);
	transform-origin: left;
}

/* Hover effect */
.card-body:hover .card-title::before,
.card-body:hover .card-title::after {
	transform: scaleX(1);
}

<div class="card">
	<div class="card-body">
		<h3 class="card-title"></h3>
	</div>
</div>