CSS过渡效果

Question

当我们在事件中从一个值移动到另一个值时，必须发生转换。

此处是元素的可见性设置：

.two {
  background-color: #9fa8da;
  position: absolute;
  visibility: hidden;
  transition: visibility 3ms ease-in;
}

点击按钮后，可见性设置为“可见＆＃39;

”

.two-show {
   visibility: visible;
}

但是没有动画效果。

Plnkr：

http://plnkr.co/edit/4Fhb1Uj744BRwCDhebOP?p=info

Answer 1

尝试将此添加到.two {}：

-webkit-transition: visibility 30ms ease-in, -webkit-transform 3s;
-moz-transition: visibility 30ms ease-in;
-o-transition: visibility 30ms ease-in;

我想知道3ms是否要禁食？

Answer 2

您可以使用opacity属性获得所需的效果。 Updated your plunker使用这种新方法。我也增加了效果明显的过渡时间。

.two {
  background-color: #9fa8da;
  position: absolute;
  opacity: 0;
  transition: opacity 3s ease-in;
}

.two-show {
  opacity: 1;
}