Question

我试图通过CSS过渡来移动一些元素。我通过为每个要转换的元素添加一个单独的选择器使其工作正常，但是当我为所有元素使用一个选择器时它不起作用（它们最终都在同一个地方）。有人可以解释为什么它不能这样工作吗？

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，左侧属性不会转换为第四和第五个元素。

这是工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

为什么会这样？我无法在文档中找到答案。

Answer 1

您的问题是因为当您共享相同的:hover规则时，您在第四和第五个元素上设置了left: 0，因此他们会相应地定位到他们的父亲是亲戚（.block）然后没有空间让他们根据你的意愿制作动画。当您使用单独的选择器时，left仍然保留默认值auto，以便right正确地为这两个元素设置动画。

如果您未指定left或right，则其默认值为auto，而不是0。 13 C heck MDN docs.

Answer 2

虽然@Juan已经回答，你可以考虑使用翻译道具而不是左上角的绝对位置。这篇文章是关于： 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);
}

CSS过渡 - 我需要一个解释

2 个答案: