模糊動畫angularjs

Question

你好我有一個數組

$scope.items = ['Informacje', 'Opis', 'Cena', 'Podsumowanie' ]; 

，並鑑於我改變由ng-click指令選擇之一，僅顯示通過ng-if指令選擇之一。

<div ng-if="selected.item == 'Informacje'"> 

現在我想用ng-click指令，它改變selected.item點擊按鈕時，在輸入/輸出快速動畫模糊。我怎樣才能做到這一點？

Answer 1

只需將此類添加到ng-if（animate-if）div即可。所以HTML將

<div ng-if="selected.item == 'Informacje'" class="animate-if"> 

Plunkr Demo

另一個演示。

Plunkr Demo

同時請包括庫ng-animate

CSS：

.animate-if { 
    background:white; 
    border:1px solid black; 
    padding:10px; 
} 

.animate-if.ng-enter, .animate-if.ng-leave { 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; 
} 

.animate-if.ng-enter, 
.animate-if.ng-leave.ng-leave-active { 
    opacity:0; 
} 

.animate-if.ng-leave, 
.animate-if.ng-enter.ng-enter-active { 
    opacity:1; 
} 

參考文獻：

1. ng-if documentation