我如何在本文中应用淡出效果

Question

我有一个简单的html和css，在悬停在它上时可见 span。

我想为此添加淡出效果，但是我添加了transition: ease-in-out 1s;，什么也没发生。我真的很愚蠢吗？

div#text1 span#s1main {
  display: inline;
}
div#text1:hover span#s1main {
  display: none;
}
div#text1 span#s1morph {
  display: none;
}
div#text1:hover span#s1morph {
  display: inline;
}

<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

感谢您的任何帮助。

Answer 1

您必须添加要过渡的属性。例如：

transition: width 250ms ease-in-out;

，或者您可以申请全部：

transition: all 250ms ease-in-out;

http://www.w3schools.com/css/css3_transitions.asp

正如Chiller所说的显示不是动画属性，您必须不透明地进行。

Answer 2

display无法过渡https://www.w3.org/tr/css3-transitions/#animatable-css

您需要切换单词的不透明度。这是一个演示：

#text1 span {
  display: inline-block;
  max-width: 100%;
}
/* Text 1 */
#text1 #s1main {
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out;
}
/* Text 2 */
#text1 #s1morph {
  opacity: 0;
  max-width: 0;
  visibility: hidden;/* for screen readers */
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out;
}
/* Text 1 Hover */
#text1:hover #s1main {
  opacity: 0;
  max-width: 0;
  visibility: hidden;/* for screen readers */
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out;
}
/* Text 2 Hover */
#text1:hover #s1morph {
  max-width: 100%;
  opacity: 1;
  transition: max-width 0s linear 250ms, visibility 0s linear 250ms, opacity 250ms ease-in-out 250ms;
  visibility: visible;/* for screen readers */
}

<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

此演示使用多个过渡和transition-delay属性来隐藏不透明度过渡完成后隐藏单词。

Answer 3

umm dispay none none无法处理过渡，您可能必须使用不透明度和元素的位置才能使其正常工作。

div#text1 span#s1main {
  opacity:1;
  transition: 1s all;
}
div#text1:hover span#s1main {
  opacity:0;
}
div#text1 span#s1morph {
  position:absolute;
  left:0px;
  opacity:0;
  transition: 1s all;
}
div#text1:hover span#s1morph {
  opacity:1;
}
body{
  margin:0;
  }

<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>

Answer 4

您不能将过渡用于属性显示。您可以将其用于不透明度

div#text1 span#s1main {
  transition:opacity 1s;
  position:absolute;
  opacity:1;
}
div#text1:hover span#s1main {
   opacity:0;
}
div#text1 span#s1morph {
  transition:opacity 1s;
  position:absolute;
  opacity:0;
}
div#text1:hover span#s1morph {
   opacity:1;
}

<div id="text1">
  <span id="s1main">Hello World</span>
  <span id="s1morph">Secondary Text</span>
</div>