我可以'似乎没有运行ngAnimate

I can't seem to run ngAnimate?

本文关键字：运行 ngAnimate 我可以      更新时间：2023-09-26

我有一个ngAnimate依赖项注入问题。我不知道为什么，但每当我在js代码中包含ngAnimate作为依赖项时，它都不起作用。。。这不是剧本。。。

我有这个html代码：

<!doctype html>
<html ng-app="myApp">
        <head>

            <script src=" https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
            <script src="codebuttonewb.js"></script>
            <style>
                    .hidden{
                        display:none;
                    }
                    ul{
                    //display:flex;
                    margin-bottom:10px;
                     list-style-type: none;
                    }
                    li span{
                    display:inline-block;
                    line-height:50px;
                    }
                    li img{
                    margin-right:10px;
                    border-radius:50%;
                    width:50px;
                    height:50px;
                    }
            </style>
        </head>
        <body ng-controller="myController">
            <input type="text" ng-model="search" placeholder="search">
            <ul ng-class="{'hidden' : !toggle}"><!--  if this value is false then show the class of hidden -->
                <li ng-repeat="item in list | filter:search"
                    ng-class="item.age>29 ? 'over-thirty' : 'under-thirty'">
                    <img ng-src="{{item.img}}"/>
                    <span> {{item.name}} - <em>{{item.age}}</em></span>
                </li>
            </ul>
            <button ng-show="!toggle" ng-click="toggle=true" >show names</button>
            <button  ng-show="toggle" ng-click="toggle=false">hide names</button>
            <form ng-submit="addPerson()">
                    <input type="text" placeholder="name" ng-model="name"/>
                    <br/>
                    <input type="number" placeholder="age" ng-model="age"/>
                    <br/>
                    <input type="submit" value="submit" />
                </form>
        </body>
</html>

这个js代码：

angular.module('myApp', ['ngAnimate'])
            .controller("myController",function($scope){

                $scope.toggle =true; 

                $scope.list=[
                {name:'bla',age:28,img: 'https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg'},
                {name:'blabla',age:38,img: 'https://s3.amazonaws.com/uifaces/faces/twitter/mlane/128.jpg'},
                {name:'blaba',age:23, img:'https://s3.amazonaws.com/uifaces/faces/twitter/felipenogs/128.jpg'},
                {name:'blablala',age:56, img:'https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg'}
                ];

                $scope.addPerson= function(){
                    $scope.list.push({name:$scope.name,age:$scope.age});
                    $scope.name="";
                    $scope.age="";
                };
            });

任何解决方案都是非常受欢迎的。这是我第一次使用ngAnimate，所以我想它可能有些愚蠢。

我以前也遇到过类似的问题。尝试更改：

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

至：

<script src="https//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>

要使用ngAnimate，需要添加任何CSS效果。让我给你推荐一些动画css方法。

<div class="fade"></div>
<style>
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}
</style>

ngAnimate将只输入ng输入和g活动类。你需要自己写css。这里我给出了渐变效果。

相关文章：