Angular.js动画不起作用

Angular.js animation not working

本文关键字：不起作用 动画 js Angular      更新时间：2023-09-26

我用HTML 写了一个小代码

<html ng-app="myApp">
    <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js' ></script>
    <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js' /></script>
    <script src='./hello.js' ></script>
<style>
    .sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}
.sample-show-hide {
  -webkit-transition:all linear 3s;
  transition:all linear 3s;
}
.sample-show-hide.ng-hide {
  opacity:0;
}
</style>
    </head>
    <body ng-controller='Sample'>
        <div class='sample-show-hide' style='z-index:2;' ng-init='timeout=false;' ng-hide='timeout'> Unable to get location </div>
    </body>
</html>

其中hello.js代码是

   var myApp = angular.module('myApp',[]);
    myApp.controller('Sample',function($timeout,$scope){
    console.log('coming here');
    $timeout(function(){
        console.log('coming here again');
        $scope.timeout=true;
    },2000);
});

但在我的代码中，动画不起作用。有人能告诉我为什么不起作用吗？？

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

试试这个代码：）

相关文章：