Question

我正试图让div在显示和隐藏时淡入淡出。花了很长时间让div才显示出来！所以现在我差不多了，只需要过渡到工作。这是一个掠夺者。

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。然后与课程＆＃34;显示＆＃34;添加display：内联到我想要显示的div。我无法通过转换来实现这一目标。所以这就是我所做的：我添加了不透明度：0到所有div的初始状态。然后我把不透明度：1添加到＆＃34;显示＆＃34;类。过渡开始奏效。在此处更新了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;
}

角度淡入淡出过渡不起作用

1 个答案: