動畫沒有發生 - AngularJS，onsen，cordova

我一直在試圖創建簡單的動畫效果（褪色）對div的隱藏。參考下面的代碼。動畫沒有發生 - AngularJS，onsen，cordova

HTML代碼

<body ng-controller="AppController"> 
    <ons-navigator var="navi"> 
    <ons-page ng-controller="HomeController"> 
    <div ng-show="splashPresent" class="check-element sample-show-hide"> &nbsp; test</div> 
    <br/> 
    <input type="button" value="Click Me!" ng-click="hideMe()" /> 
    </ons-page> 
    </ons-navigator> 
</body>

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; 
}

JS代碼

module.controller("HomeController", function($scope, $timeout){ 
     $scope.splashPresent = true; 
     $scope.hideMe = function(){ 
      $scope.splashPresent = false; 
     }; 
});

同時單擊BU後tton，div被隱藏，但它沒有應用動畫效果。不過，相同的代碼適用於瀏覽器。

來源

2015-04-05 CuriousMind

這可能是一些事情，答案似乎是在您的html標題，或角模塊聲明。

首先，檢查您的標題中是否包含對angular-animate的引用。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular-animate.js"></script>

接下來，請確保您在模塊聲明中放置了對ngAnimate的依賴關係。

var app = angular.module('myApp', ['ngAnimate']);

了NG隱藏，NG-輸入，NG-移動（在此情況下NG-隱藏）應該適當地應用到容器上，並且動畫應該正確地繼續進行。請參閱this plunker以瞭解您的代碼的實際示例

這也取決於您的設備。來自7+的4.1+和iOS支持Android css動畫。有關更多信息，請參閱this table。

來源

2015-04-06 14:25:48 laughingpine

角動畫庫已添加到腳本部分，並且應用程序對ngAnimate具有依賴關係。我正在使用Lollipop 5.0，因此CSS動畫的問題也不應該發生。但沒有運氣。 – CuriousMind 2015-04-07 04:16:19

拋出任何異常？你的角度模塊聲明和配置是什麼樣的？ – laughingpine 2015-04-07 13:55:22

動畫沒有發生 - AngularJS，onsen，cordova

回答

相關問題