帶角度的css動畫

我似乎有一個動畫與角度相結合的問題。我有以下格在我的html：帶角度的css動畫

<div class="show-hide" ng-show="questionOfType === '1'">...</div>

，我有以下的CSS：

.show-hide { 
     -webkit-transition:all linear 2s; 
     transition:all linear 2s; 
    }

所以我預計是一次questionOfType將被設置爲1，我會看到的div內容出現與動畫，但它只是出現regulary沒有動畫。我在做什麼錯？

在此先感謝。

來源

2015-11-30 Gabi Gatzki

您應該加載$animate作爲一個模塊：

https://docs.angularjs.org/guide/animations

這是使用CSS（和$animate）

<div ng-init="checked=true"> 
    <label> 
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible... 
    </label> 
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;"> 
    Visible... 
    </div> 
</div>

$動畫結合的作品與你的CSS從他們的主要頁面的例子

再次來自角度文檔的示例：

.sample-show-hide { 
    padding:10px; 
    border:1px solid black; 
    background:white; 
} 

.sample-show-hide { 
    -webkit-transition:all linear 0.5s; 
    transition:all linear 0.5s; 
} 

.sample-show-hide.ng-hide { 
    opacity:0; 
}

所以更改爲：

<div class="check-element show-hide" ng-show="questionOfType === '1'">....</div>

和你有一個模型，使用無顯示或隱藏？

來源

2015-11-30 21:34:18 xeon48

不幸的是，CSS轉換無法在display: block和display: hidden之間生成動畫，這是ng-show正在切換的內容。

相反，你可以動畫的不透明度0和1之間：

.show-hide { 
    -webkit-transition: opacity linear 2s; 
    transition: opacity linear 2s; 
    opacity: 0; 
} 
.show-hide.active { 
    opacity: 1; 
}

而在標記，切換active類我在上面使用ng-class規定：

<div class="show-hide" ng-class="{'active': questionOfType === '1'}" ng-show="questionOfType === '1'">...</div>

來源

2015-11-30 22:04:37 mrdommyg

帶角度的css動畫

回答

相關問題