Question

网页的各种元素都有背景转换，从颜色变为颜色：

@-moz-keyframes backgroundTransition /* Firefox */ {
    0%   {background-color:#ff7b7b;}
    33%   {background-color:#7fceff;}
    66%   {background-color:#80e880;}
    100%   {background-color:#ff7b7b;}
}
@-webkit-keyframes backgroundTransition /* Safari and Chrome */{
    0%   {background-color:#ff7b7b;}
    33%   {background-color:#7fceff;}
    66%   {background-color:#80e880;}
    100%   {background-color:#ff7b7b;}
}

但是，如果一个元素是display: none，然后通过javascript显示，则颜色与其他元素不一致，它会从0%颜色开始循环。

有没有办法保持转型的普遍性？谢谢你的时间。

Answer 1

您是否尝试通过制作opacity:0隐藏元素，然后将其设置为1以取消隐藏元素？这应该允许背景颜色与所有其他元素一起转换，但保持元素不可见。

顺便说一句，此时所有主流浏览器都很好地支持keyframes CSS指令。不再需要使用供应商前缀。

document.querySelector("button").addEventListener("click", function(){
  document.querySelector(".hidden").classList.remove("hidden");
});

div {
  width:50px;
  height:50px;
  background-color:black;
  border:1px solid black;
  
  animation-duration: 8s;
  animation-name: backgroundTransition;
}

/* The hidden elements will not take up space in the
   normal document flow and will not be visible because
   the will be 100% transparent. Simply removing this 
   class when its time to see the element(s) puts them
   back into the normal flow and their background will
   be the same as all the other div elements. */
.hidden { opacity:0; position:absolute; }

@keyframes backgroundTransition{
	0%   {background-color:#ff7b7b;}
  33%   {background-color:#7fceff;}
  66%   {background-color:#80e880;}
  100%   {background-color:#ff7b7b;}
}

<div></div>
<div class="hidden"></div>
<div></div>

<button>Click me during the animation to reveal the hidden div,<br>which will have its color in sync with the other div elements</button>

Answer 2

我认为您无法使用visibility css属性来处理它，或者无论何时渲染它都会从0开始

Answer 3

过渡对于浏览器未呈现的元素不起作用，但对于元素隐藏＆＃39; ;）尝试使用antoher选项来隐藏你的元素：

opacity: 0

height:0; width:0;

z-index: <val>

CSS3保持背景颜色过渡相同

3 个答案: