angularjs - CSS 过渡效果无法正常工作

Question

在某个按钮点击事件发生时，我将元素的不透明度从 0 更改为 1，反之亦然。

已为不透明度属性定义了过渡属性。

然而，过渡效果未能发生。

这是 plnkr 的链接: http://plnkr.co/edit/hrxtvxIIAysEw1iF2DLn

原始属性设置如下:

.part1 {
  opacity: 0;
  transition: all 5ms linear;
}

.part2 {
  opacity: 0;
  transition: all 5ms ease-in;
}

.part3 {
  opacity: 0;
  transition: all 5ms ease-in-out;
}

transition 属性在如下指令中设置:

 scope.$watch(attrs.showMe, function(newValue) {

        if (newValue === true) {
          element.css({
            'opacity': 1,
            'display': 'block',
            'background-color': attrs.myColor
          });
        } else {
          element.css({
            'opacity': 0,
            'display': 'none'
          });
        }

      });

Answer 1

转换不会发生，因为您还将元素的 display 从 block 更改为 none。由于过渡属性为“全部”，因此浏览器仅在过渡结束时应用显示更改。尝试移除显示更改，或仅将过渡属性更改为 opacity。