Почему эти 2 элемента не переходят одновременно? - PullRequest
Новая
       28

Почему эти 2 элемента не переходят одновременно?

0 голосов
/ 31 мая 2018

У меня есть элемент с 2-мя псевдоэлементами (.card-title::before и .card-title::after) с переходом, который меняет ширину с 0 на 40 пикселей.

Исходная скорость перехода составляет 0,5 с, но для демонстрацииДля этого я изменил его на 15 с, чтобы вы могли четко видеть, что псевдоэлемент ::before запускается до ::after.

Если вы его не видите, попробуйте открыть фрагмент кода вполная страница.

Почему это так и как мне решить эту проблему?

Я могу обойти это, добавив очень короткую (например, 0,05 с) задержкуна ::before, но я думаю, вы понимаете, почему мне не нравится эта идея. 

*,
*::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>

1 Ответ

0 голосов
/ 31 мая 2018

Я не уверен, но ваша проблема может быть вызвана проблемой округления: один переход округляет пиксель вниз, а другой округляет вверх.

Однако вы можете перейти от изменения ширины к настройкемасштаб, используя 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>
...