這裏是我正在開發的項目。淡入淡出顯示和隱藏
轉到產品。
點擊/切換沖洗坐騎和出版社的圖書
遵守以下衰落和退房的圖像。正如你所看到的,第一個圖像很好地淡出,但第二個圖像立即彈出。如何讓他們都淡化順利和很好?
HTML:
<div class="text-center font-zero">
<a class="category" ng-class="{active: flushMount}" ng-click="flushMount = true" ng-init="flushMount = true">
Flush Mounts
</a>
<a class="category" ng-class="{active: !flushMount}" ng-click="flushMount = false">
Press Books
</a>
</div>
<div class="container">
<div class="book-markers text-center">
<div class="book-item" ng-show="flushMount">
...
</div>
<div class="book-item" ng-hide="flushMount">
...
</div>
</div>
</div>
SCSS
.book-item{
@include transition(all 0.5s ease);
opacity: 1;
&.ng-hide-add,
&.ng-hide-remove{
display: inline-block !important;
}
&.ng-hide{
opacity: 0;
}
}