html - 使淡入淡出在 ng show 和 hide 上更平滑

Question

这是我正在开发的元素。

Test Project Link

转到产品。

单击/切换嵌入式安装和打印书籍

观察下面淡入淡出的图像。正如您所看到的，第一张图像很好地淡出，但第二张图像立即弹出。如何让它们都褪色光滑漂亮？

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;
    }
}

Answer 1

最好使用 Angular 最重要的功能，使用 ng-view 并将两个 View 分成两个部分....当单击“Flush Mounts”时，flush mounts div 会平滑淡入，当您单击“Press Books”时"新闻书籍 div 也顺利淡出。 ng View 示例:http://jsfiddle.net/carpasse/mcVfK/3/

   <ng-view>
   </ng-view>