Question

我有这个简单的HTML和CSS交换，当鼠标悬停在span上时可以看到它。{/ p>

我想为此添加一个淡入淡出效果，但我添加了transition: ease-in-out 1s;并且没有任何反应。我真的很笨吗？

＆＃13;

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

＆＃13;

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

＆＃13;

感谢您的帮助。

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没有人不会使用转换，你可能必须使用不透明度和元素的位置来使它工作。

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>

如何对此文本应用淡入淡出效果？

4 个答案: