Angular 1.2：使用ngAnimate和CSS並行動畫列表項目

我有一個列表，當我向該列表中添加一個項目時，我希望將它動畫化到視圖中，並且當前正在查看的任何現有項目也應該同時動畫 - 想想垂直傳送帶從上到下。Angular 1.2：使用ngAnimate和CSS並行動畫列表項目

除了可視物品之外，我還有幾乎所有的東西都是在添加新物品時進入到位。這裏有一個代碼片段：

<div class="outerContainer"> 
    <div class="container" ng-repeat="item in items"> 
    ..... 
    </div> 
</div> 

.outerContainer { 
    height: 200px; 
    overflow: hidden; 
} 

.container { 
    position: relative; 
    background-color: lightgray; 
    margin: 1px; 
    width: 200px; 
    height: 50px; 
} 

.container.ng-enter { 
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all; 
} 
.container.ng-enter { 
    top:-50px; 
} 
.container.ng-enter.ng-enter-active { 
    top:0; 
}

任何有用的指針將不勝感激。

來源

2013-11-27 user3034151

什麼角度版本，你使用什麼瀏覽器，你在看嗎？ – eddiec

Angular 1.2.1和Chrome 31.0.1650.57 – user3034151

是否包含angular-animate.js和加載ngAnimate模塊？ – eddiec

我相信你的躍遷，在錯誤的位置的過渡性質，就應該這樣寫

.container.ng-enter { 
    -webkit-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
}

來源

2013-11-27 22:05:06 eddiec

我很感謝您的幫助，但沒有任何區別。 – user3034151

我懷疑它適用於第一個項目，因爲它從頂部開始：-50px，然後移動到頂部：0px的位置。但是，再次爲同一個項目製作動畫需要一個新的開始位置頂部：0px動畫到頂部：50px再次爲同一個項目製作動畫會需要以50開始的起始位置以100爲結尾，等等 - 這可能就是爲什麼它們是捕捉動畫。我不能成爲第一個遇到這個問題的人。 – user3034151

我已經構建了一個codepen來反映我認爲你的問題是什麼 - http://codepen.io/ed_conolly/pen/ufmIL。是對的嗎？其他元素跳下來，因爲創建了上面的新元素。 – eddiec

Angular 1.2：使用ngAnimate和CSS並行動畫列表項目

回答

相關問題