2014-09-01 121 views
0

這裏是我正在開發的項目。淡入淡出顯示和隱藏

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

回答

0

這是更好地使用角最重要的特點,採用NG-視圖和兩種觀點分成兩個諧音... 。點擊「沖洗安裝」時,沖洗安裝盤會順利淡入,當您點擊「衝壓書籍」時,衝壓書籍分區也會順利淡入。 NG-查看示例:問題的http://jsfiddle.net/carpasse/mcVfK/3/

<ng-view> 
    </ng-view> 
0

的是,你總是看到「刷新坐騎」(頂部),在任何褪色或淡出。淡出需要兩倍的時間。我認爲這與Angular的動畫過程和動畫在一個循環中運行的事實有關。

您已在您的基類中定義了transition,並且ng-hide-add/remove定義了display: inline-block;。動畫過程首先添加添加和刪除類。在你的情況下,這已經增加了一個轉換display: none -> inline-block。然後添加ng-hide,這增加了另一個轉換opacity: 1 -> 0。另一方面,淡入只有一個過渡。

我不完全確定它是誰的錯。我建議你首先將div放在z-index而不是y座標的上方。無論如何,你應該這樣做。然後,您可以將轉換放置在隱藏類(或.book-item.ng-hide)上,而不是直接在book-item上。