个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我有 ngAnimate 依赖注入(inject)问题。我不知道为什么，但每当我将 ngAnimate 作为依赖项包含在我的 js 代码中时，它就不起作用......这不是剧本...
我有这个 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>
关于javascript - 我似乎无法运行 ngAnimate？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31089025/
27
4
0
我正在努力解决一个问题:我有一个包含 x 数量项目的菜单。 在这个例子中，我有三个项目。 每个项目都有一个内容部分，因此通过单击菜单项，内容应该滑入。 到目前为止，我所取得的成就是，当您从“项目 1”
我试图让离开动画与速度和 Angular 一起工作，以便当表格行离开时它们会向右移动。 在示例中，我使用离开回调来尝试动画离开 ng-repeat，但回调运行但没有任何反应! angular.modu
我正在使用 ngAnimate 模块，但我所有的 ng-if、ng-show 等都受此影响，我想利用 ngAnimate 来实现一些功能选定的元素。对于性能和元素中的一些错误，显示和隐藏速度非常快。
Error: f.element._data is not a function t@http://localhost:3000/lib/angular-animate/angular-animate
我已经使用 ngAnimate 在 ngView 上的应用程序中设置了动画。每次状态发生变化时，下一个 View 都会从右侧滑入。 我希望能够扭转这一情况，以便在某些情况下， View 从左侧滑入(如
我在使用 ngAnimate 和 ui-view 时遇到错误。加载或点击任何导航菜单； angular-animate.js 生成“对象不是函数”错误。 这里是主要的 javacsript 应用程序:
我的 HTML 看起来像这样； {{msg.loading || 'loading'}} {{msg.loadingPerc}}%
我试图将动画引入我的应用程序，但是当我在应用程序中包含 ngAnimate 依赖项时，它不会加载，也不会在控制台中出现任何错误，这使得调试非常困难。 index.html:
我无法使用简单的 Angular 动画。我做了一个简单的 Plunkr 来展示它:https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ HTML
我正在为我的元素制作一个内容 slider ，但我对 AngularJS 的经验很少。我找到了 this plunker这非常适合我的需要。可以看我的直播page here .它是俄语，但我希望这不会
在过去的 10 个小时里，我一直在努力让动画发挥作用，只有在我添加 animate.css 样式表并使用“动画类名”时它们才能发挥作用，但是当我想为进入和离开制作自定义动画时，我做不到无论如何它都能工
我有 ngAnimate 依赖注入(inject)问题。我不知道为什么，但每当我将 ngAnimate 作为依赖项包含在我的 js 代码中时，它就不起作用......这不是剧本... 我有这个 htm
我已经在元素中实现了 ngAnimate 以帮助制作动画，但我在某些元素上遇到了非常奇怪的行为。 为了添加一些背景，我们有一个商店，其中包含类别和类别内的产品。我正在执行 ng-repeat: dat
我尝试使用 angular 和 ngAnimate 来获得幻灯片效果。我可以很好地作为 opacity 的淡入/淡出效果。 .show-animation { -webkit-transition
我想在使用 ng-repeat 重复的自定义指令上使用 ngAnimate。如果我在一个简单的 html 列表项上使用 ng-repeat，动画效果很好。但是，只要用自定义指令元素替换列表项，就不会触
我正在尝试使用 ngAnimate 折叠进/出框。我做了类似的事情并且它有效，但我如何摆脱高度属性？可以使用装箱来扩展(其中的文本)，但文本会超出边缘。 .myTest { transition:
我是单元测试以及 ng-animate 模块的新手。我做了一个简单的指令来测试 ng-animate。 .directive('slideShow', function ($animate, $co
我正在尝试使用 ngAnimate 制作一些动画，但我什至无法开始使用它。问题是，当我尝试将 ngAnimate 依赖项添加到应用程序文件时，它会在控制台中向我抛出此错误，并且我的应用程序无法运行。
我在构建 Angular JS 项目时遇到问题。 它说无法实例化模块 ngAnimate，原因是: 我已将所有服务放入 [] 中，但 ngAnimate 无法正常工作。 这是应用程序 无法实例化模块
我已经将脚本链接到我的 html 文件以进行 angularjs、清理和动画处理: 当我将 ngAnimate 作为依赖项添加到我的模块时，就像这样: var nameSpace = angu
我是一名优秀的程序员,十分优秀！