角JS 1.2 - 動畫與NG-秀子元素

我新的角度JS，看了就如何動畫角的方式有些stuff，還是我上是多麼困惑正確地實現它以及何時何地添加什麼類。我覺得我對傳統jQuery的動畫有更多的控制（添加和刪除類）。但也許這只是因爲我習慣了這種方式。

在頁面加載中我想要某些元素進行動畫。因此，在我的控制器中，頁面加載時，變量（pageLoaded）被設置爲true。而我周圍的內容包裝div將有ng-show =「pageLoaded」。

這樣，我已經成功地將一個動畫使用下面的CSS轉換/動畫在整個頁面上：

.page.ng-hide-add, .page.ng-hide-remove { 
    display:block!important; 
} 

.popup.ng-hide-add { 
    -webkit-animation: 450ms bounceInRight reverse; 
} 

.popup.ng-hide-remove { 
    -webkit-transform: translateX(100%); 
    -webkit-animation: 750ms bounceInRight; 
}

但是，一旦我試圖解決的子元素，動畫失敗。

.page.ng-hide-add .child, .page.ng-hide-remove .child { 
    display:block!important; 
} 

.popup.ng-hide-add .child { 
    -webkit-animation: 450ms bounceInRight reverse; 
} 

.popup.ng-hide-remove .child { 
    -webkit-transform: translateX(100%); 
    -webkit-animation: 750ms bounceInRight; 
}

這不支持Angular嗎？或者我做錯了什麼？

如果我理解正確，不管你是用ng-hide還是ng-show .. 都應該使用ng-hide類？他們遵循以下邏輯：

NG隱藏，刪除/ NG隱藏去除的活性顯示元素
NG隱藏加/ NG隱藏加活性隱藏元素

有人可以解釋普通班和活動班之間的區別嗎？他們應該如何使用？

來源

2014-02-17 deadconversations

你能分享你的HTML嗎？ –

你試過.child.ng-hide-remove和.child.ng-hide-add，而不是隻有.child？ – V31

是的，沒有工作。 – deadconversations

看來，Angular掃描文件的東西進行動畫，我發現，當想要動畫的孩子元素。只要您希望孩子轉換，您必須在父母上設置轉換。

例如。

.page.ng-hide-add, .page.ng-hide-remove { 
    -webkit-transition: 1000ms; 
} 

.page.ng-hide-add .child, .page.ng-hide-remove .child { 
    display:block!important; 
} 

.popup.ng-hide-add .child h1 { 
    -webkit-animation: 450ms bounceInRight; 
} 

.popup.ng-hide-add .child h2 { 
    -webkit-animation: 750ms bounceInRight 250ms; 
}

角，只會增加「動漫」類，如果與NG-IF/NG-SHOW或NG-任何元件在爲其指定的CSS過渡的HTML元素。

來源

2014-02-25 10:06:09 deadconversations

角JS 1.2 - 動畫與NG-秀子元素

回答

相關問題