CSS переходы - мне нужно объяснение

html css css-transitions

46 просмотра

2 ответа

Я пытался переместить некоторые элементы с переходом в CSS. Я сделал это нормально, добавив отдельный селектор для каждого элемента, который я хочу перевести, но он не работает, когда я использую один селектор для всех (они все равно оказываются в одном и том же месте). Может кто-нибудь объяснить, почему это так не работает?

body {
		text-align: center;
	}

	.block {
		position: relative;
		display: inline-block;
	}

	.part1 {
		font-family: Arial;
		font-size: 50px;
		font-weight: bold;
		opacity: 0.2;
		position: relative;
		z-index: 1;
	}

	.part {
		font-family: Arial;
		font-size: 50px;
		font-weight: bold;
		opacity: 0.2;
		position: absolute;
		transition: top 2s ease-in, left 2s ease-in, right 2s ease-in;
	}

	.block .part:nth-child(2) {
		top: 100px;
		left: 100px;
	}

	.block .part:nth-child(3) {
		top: 0;
		left: 200px;
	}

	.block .part:nth-child(4) {
		top: 0;
		right: 200px;
	}

	.block .part:last-child {
		top: 100px;
		right: 100px;
	}

	.block .part1:hover ~ .part {
		top: 0;
		left: 0;
		right: 0;
	}
<span class="block">
		<span class="part1">O</span>
		<span class="part">O</span>
		<span class="part">O</span>
		<span class="part">O</span>
		<span class="part">O</span>
</span>

Как видите, свойство left не переходит для четвертого и пятого элемента.

Вот рабочий фрагмент:

body {
		text-align: center;
	}

	.block {
		position: relative;
		display: inline-block;
	}

	.part1 {
		font-family: Arial;
		font-size: 50px;
		font-weight: bold;
		opacity: 0.2;
		position: relative;
		z-index: 1;
	}

	.part {
		font-family: Arial;
		font-size: 50px;
		font-weight: bold;
		opacity: 0.2;
		position: absolute;
		transition: top 2s ease-in, left 2s ease-in, right 2s ease-in;
	}

	.block .part:nth-child(2) {
		top: 100px;
		left: 100px;
	}

	.block .part:nth-child(3) {
		top: 0;
		left: 200px;
	}

	.block .part:nth-child(4) {
		top: 0;
		right: 200px;
	}

	.block .part:last-child {
		top: 100px;
		right: 100px;
	}

	.block .part1:hover ~ .part:nth-child(2) {
		top: 0;
		left: 0;
	}

	.block .part1:hover ~ .part:nth-child(3) {
		left: 0;
	}

	.block .part1:hover ~ .part:nth-child(4) {
		right: 0;
	}

	.block .part1:hover ~ .part:last-child {
		top: 0;
		right: 0;
	}
<span class="block">
		<span class="part1">O</span>
		<span class="part">O</span>
		<span class="part">O</span>
		<span class="part">O</span>
		<span class="part">O</span>
	</span>

Почему это происходит? Я не смог найти ответ в документации.

Автор: fpiskur Источник Размещён: 08.11.2019 11:21

Ответы (2)


1 плюс

Решение

Ваша проблема в том, что когда вы используете одно и то же :hoverправило, вы настраиваете left: 0свои четвертый и пятый элементы, поэтому они будут позиционироваться в соответствии со своим родителем, который является относительным ( .block), тогда у них не останется места для анимации по вашему желанию. , Когда вы используете отдельный селектор, leftостается значение по умолчанию, autoпоэтому он rightкорректно анимирует эти два элемента.

Если вы не укажете leftили rightих значение по умолчанию - autoнет 0. C Хека MDN Docs.

Автор: Juan Ferreras Размещён: 20.08.2016 01:35

1 плюс

Хотя @Juan уже ответил, вы можете рассмотреть возможность использования translate prop вместо абсолютной позиции вверху слева. Вот статья о: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

body {
    text-align: center;
}

.block {
    position: relative;
    display: inline-block;
}

.part1 {
    font-family: Arial;
    font-size: 50px;
    font-weight: bold;
    opacity: 0.2;
    position: relative;
    z-index: 1;
}

.part {
    font-family: Arial;
    font-size: 50px;
    font-weight: bold;
    opacity: 0.2;
    position: absolute;
display:block;
    transition: all 2s linear;
}

.block .part:nth-child(2) {
top:0;
left:0;

transform:translate(100px,100px);
}

.block .part:nth-child(3) {
top:0;
left:0;
transform:translate(200px,0);
}

.block .part:nth-child(4) {
top:0;
left:0;
transform:translate(-200px,0);

}

.block .part:last-child {
top:0;
left:0;
transform:translate(-100px,100px);

}

.block .part1:hover ~ .part {
    transform: translate(0,0);
}
Автор: TrzasQ Размещён: 20.08.2016 01:52
32x32