轉換動畫在角度上不起作用

請你看看代碼片段，讓我知道爲什麼動畫不起作用，例如沒有不透明度改變和沒有背景顏色改變。請注意，代碼完全來自一本書，所以我很困惑它如何無法工作。轉換動畫在角度上不起作用

請不是CSS文件，角動畫都包含在HTML

<link rel="stylesheet" href="css/simple.css"/> 
    <script src="lib/angular/angular-animate.js"></script>

HTML正文：

<body> 
    <div ng-init="isShown=true"> 
     <input type="checkbox" ng-model="isShown" />Show 
     <div ng-class="my-animation-class" ng-if="isShown"> 
     <h3>Enter/Leave Animation</h3> 
     </div> 
    </div> 
</body>

CSS代碼：

.my-animation-class.ng-enter { 
    -webkit-transition: 0.5s linear all; 
    -o-transition: 0.5s linear all; 
    -moz-transition: 0.5s linear all; 
    opacity: 0; 
    background: green; 
    } 

    .my-animation-class.ng-enter.ng-enter-active { 
    opacity: 1; 
    }

而且也請注意那ngAnimate是app.js中的依賴關係

請幫忙！事先謝謝！讓我知道是否有任何問題。

來源

2016-01-25 Rachael

你的問題是，你正在使用納克級和通過我的動畫類的作用域變量，要解決這個問題，你應該使用

<div ng-class="'my-animation-class'" ng-if="isShown">

甚至

<div class="my-animation-class" ng-if="isShown">

這樣，你的div將有這個類，動畫將運行。

希望它能解決您的問題。

來源

2016-01-25 13:06:50

但是，非常感謝回覆，恐怕它仍然不起作用（（順便說一下，我已經注意到，通過檢查元素查看時，不會創建.ng-enter和.ng-enter-active 。但是我的書作者確實說這些類是自動創建的，請讓我知道如果你有任何想法，我感到很失落，請參閱以下書籍的引用： – Rachael

當AngularJS插入模板時，會添加ng-enter類。。你可以使用這個類來編寫你的起始動畫，一旦添加了模板，ng-enter-active被添加到元素中，這標誌着轉換的結束。 – Rachael

轉換動畫在角度上不起作用

回答

相關問題