Question

使用JavaScript通过onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; };更改元素的不透明度，您期望过渡过程需要一秒钟，here会完成：

p {
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

display: none

但是，如果元素具有display: initial，并且在更改不透明度之前先将其更改为onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.display = "initial"; p.style.opacity = 1; };（以便查看），过渡将不再起作用，您可以看到{{3} }：

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

userDir = {"User1": [{"folder1": [file1, file2]}, file3], "User2": []}

这是为什么？

注意：我不是在显示属性上使用过渡，也不是在为此寻找解决方法。

Answer 1

tldr：：您不能将transition属性与display属性一起使用。是的，您不能在当前transition属性为display的元素的任何其他CSS属性上使用none属性。

最干净的解决方法是同时转换width属性和opacity属性。

选中此JSFiddle，以了解如何使用width和height属性来复制display:none属性，该属性不允许元素在文档流中占用任何空间

<span>元素仅用于说明<p>标签在隐藏时如何不占用任何空间。

您也可以在以下代码段中检出代码，但是正如您所提到的，由于某些奇怪的原因，转换在这里不起作用。

var p = document.getElementsByTagName("p")[0];

p.style.width = "50%";
p.style.height = "auto";
p.style.opacity = 1;

html, body{width: 100%; height: 100%; margin: 0; padding: 0;}
p {
  width: 0;
  height:0;
  opacity: 0;
  transition: width 2s, opacity 3.5s;
  float:left;
  margin: 0;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis culpa nobis dolorem voluptates ut odio numquam officia provident quos labore, natus sint doloribus ducimus similique aspernatur, enim, voluptatibus vel facere!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, adipisci? Quidem laboriosam sunt, qui non ea placeat laborum deserunt consequatur consequuntur vel, officiis magnam. Vitae officiis, quidem doloribus nesciunt voluptatem!
</p>
<span>Right side text</span>

但是，如果您必须使用display:none，那么如本css article所示，您可以使用setTimeout() 解决方法设置过渡属性之后，然后切换显示属性，而不是在期间切换显示属性，如下所示：

var p = document.getElementsByTagName("p")[0];
p.style.display = "block";

setTimeout(function(){p.style.opacity = 1;},1000);

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

Answer 2

问题似乎在于显示属性更改过程中发生了过渡（或尝试发生）（这意味着过渡仍然是none，因此过渡不起作用）。从技术上讲，过渡可以在元素具有display: none的时候开始，并且仅在将其更改为display: initial的过程完成后才可见，因为过渡是一整秒，而显示属性的变化只是一小部分其。但这似乎并非如此。

您可以在此处将具有display: none的元素更改为display: initial之前更改其不透明度，这显然不是问题所在：

var p = document.getElementsByTagName("p")[0];
p.style.opacity = 0.3;
p.style.display = "initial";

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

当然也可以事后更改它，因此这似乎只剩下我们的假设。

要确保在开始过渡之前第一个过程已完成，可以使用一个类似这样的小延迟，然后开始工作，

var p = document.getElementsByTagName("p")[0];

p.style.display = "initial";
setTimeout(function() {
	p.style.opacity = 1;
},100);

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

更改显示属性会使不透明度过渡无效

2 个答案: