AngularJS ng-repeat動畫內部ng-repeat的淡入淡出

簡單（但不適合我！）angularjs顯示/隱藏動畫問題。AngularJS ng-repeat動畫內部ng-repeat的淡入淡出

我已經搜索了高和低，但沒有找到解決這個具體問題，這也許可以用一個例子和一個「挑戰」來解釋。

首先，例如：http://jsfiddle.net/adammontanaro/QErPe/1/

挑戰：任何人都可以使這些圖像淡入和淡出超過彼此，而不是出現下面或以上當前顯示的圖像，然後彈出到一旦上面的圖像的div被隱藏了嗎？

的HTML：

<div> 
    <div data-ng-repeat="k in kitties" > 
     <img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" /> 
    </div> 
</div>

CSS：

.animate-show, .animate-hide { 
    -webkit-transition:all linear 1s; 
    -moz-transition:all linear 1s; 
    -ms-transition:all linear 1s; 
    -o-transition:all linear 1s; 
    transition:all linear 1s; 

} 

.animate-show { 
    opacity:0; 
} 

.animate-show.animate-show-active { 
    opacity:1; 
} 

.animate-hide { 
    opacity:1; 
} 

.animate-hide.animate-hide-active { 
    opacity:0; 
}

我一直在紡紗我的車輪在這幾個小時。我已經看過大量好帖子，演示如何使單個圖像或div出現或消失，但是當我嘗試簡單地交叉淡入淡出和替換時，它全部崩潰。我試着用絕對/相對定位來搞亂，但無濟於事。

嘗試用開關，但無法在開關條件中使用$索引，所以我可以在運行時加載我的圖像。這是一個很大的要求。

供參考 - 這是使用角度1.1.5

謝謝!!!亞當

來源

2013-09-25 Adam Montanaro

兩年後，我仍然在尋找這個問題和解決方案：D –

你其實已經擁有一切正確！你只是缺少一點CSS。

我用正確的東西（相對和絕對的位置和一小撮高度）固定你的jsfiddle，它的作用就像一個魅力。

大部分的新玩意：

.container{ 
    position: relative; 
    /* you have to add a height here if your container isn't otherwise set 
     becuse the absolutely positioned image divs won't calculate the height 
     for you */ 
    height: 100px; 
} 
.image-repeat{ 
    position: absolute; 
    top: 0; 
    left: 0; 
}

，如有必要，在你的HTML應用類。

檢查出來：http://jsfiddle.net/QErPe/2/

希望幫助！

來源

2013-09-25 05:03:56 betaorbust

砰！你是搖滾明星 - 謝謝！ –

我分叉這使它更好一點。如先前的評論中所述，將圖像元素放置在彼此的頂部。 http://jsfiddle.net/4qpRw/1/ –

這看起來實際上更像是一個CSS問題而不是角度問題。您需要將兩個div放在彼此的頂部，並確保它們實際上同時佔據相同的空間。之後，交叉淡化應該是小菜一碟。

來源

2013-09-25 00:58:32 Fourth

你也可以在.ng-hide類上做普通的CSS3。例如：

div img { 
    border: medium none; 
    margin: 0; 
    padding: 0; 
    opacity: 1; 
    -webkit-transition: opacity 1s ease 0s; 
    -moz-transition: opacity 1s ease 0s; 
    -o-transition: opacity 1s ease 0s; 
    transition: opacity 1s ease 0s; 
} 
div img.ng-hide { 
    opacity: 0; 
}

所以，現在，當添加ng-hide類時，它會淡化圖像的不透明度。 ngAnimate有它的位置，但在.ng-hide類中使用簡單的CSS3，可以消除挫折感。

來源

2015-02-10 23:52:53 WebDevJ

AngularJS ng-repeat動畫內部ng-repeat的淡入淡出

回答

相關問題