Угловой переход затухания не работает

Question

Я пытаюсь заставить divs исчезать и выходить, когда они отображаются и скрыты. Потребовалось много времени, чтобы заставить divs даже показать вообще! Так что теперь я почти там, просто нужно перейти к работе. Вот плункер.

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

Я собираюсь ответить на мой собственный вопрос в первый раз! Я пытался использовать display: none в начальном состоянии div. А затем с классом «show» добавьте отображение: inline к div, который я хотел показать. Я не мог этого добиться, чтобы работать с переходом. Так вот что я сделал: я добавил opacity: 0 в исходное состояние всех div. Затем я добавляю непрозрачность: 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; 
}