css - Angular 淡入淡出过渡不起作用

Question

我试图让 div 在显示和隐藏时淡入和淡出。花了很长时间才让 div 显示出来!所以现在我快到了，只需要过渡到工作。这是一个 plunker。

http://plnkr.co/edit/OtD2YXaQFNv2oe7LkR96?p=preview

  <div class="btn top-menu-button red" ng-click="pagearea1='show';pagearea2='';pagearea3=''">red</div>
  <div class="btn top-menu-button orange" ng-click="pagearea2='show';pagearea1='';pagearea3=''">orange</div>
  <div class="btn top-menu-button blue" ng-click="pagearea3='show';pagearea1='';pagearea2=''">blue</div>
  <br>
  <span class="template-panel red" ng-class="pagearea1">Red</span>
  <span class="template-panel orange" ng-class="pagearea2">Orange</span>
  <span class="template-panel blue" ng-class="pagearea3">Blue</span>

Answer 1

我试图在 div 的初始状态上使用 display: none。然后使用 show 类将 display: inline 添加到我想显示的 div 中。我无法让它与过渡一起工作。

所以这就是我所做的:我将 opacity: 0 添加到所有 div 的初始状态。然后我将 opacity:1 放入 show 类。过渡开始起作用。

此处更新了 plunker:http://plnkr.co/edit/RpqoXXHGBeYaBzIlD8Qb?p=preview

.template-panel {
    font-size: 40px;
    width: 250px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
    top: 100px;
    left: 20px;
    color: #ffffff;
    opacity: 0;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.show {
    opacity: 1;
}