CSS 过渡效果

Question

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

此处元素的可见性设置：

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

单击按钮后，可见性设置为 'visible'

.two-show {
   visibility: visible;
}

但是没有动画效果

请点击此处：

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