个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我无法使用简单的 Angular 动画。我做了一个简单的 Plunkr 来展示它:https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ
HTML
<head>
<link rel="stylesheet" href="style.css">
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-app="myApp">
<div data-ng-controller="myCtrl">
<p class="fade-fx" data-ng-repeat="text in texts">{{ text.text }}</p>
</div>
</body>
CSS
.fade-fx.ng-enter,
.fade-fx.ng-leave {
-webkit-transition: 1s linear all;
transition: 2s linear all;
}
.fade-fx.ng-enter,
.fade-fx.ng-leave.ng-leave-active {
opacity: 0;
}
.fade-fx.ng-leave,
.fade-fx.ng-enter.ng-enter-active {
opacity: 1;
}
JS
angular.module('myApp', ['ngAnimate']);
angular.module('myApp')
.controller('myCtrl', function($scope) {
$scope.texts = [
{
text: 'text1'
},
{
text: 'text2'
},
{
text: 'text3'
}
];
});
问题是我不确定自己做错了什么。有什么想法吗？
最佳答案
尝试将 $timeout 添加到初始数组初始化中。看这里: https://plnkr.co/edit/ZB312BKV8vAD3hYttaXZ?p=preview
angular.module('myApp')
.controller('myCtrl', function($scope, $timeout) {
$timeout(function() {
$scope.texts = [{
text: 'text1'
}, {
text: 'text2'
}, {
text: 'text3'
}];
});
});
编辑:在不相关的说明中，切换会更干净
.fade-fx.ng-enter,
.fade-fx.ng-leave {
-webkit-transition: 1s linear all;
transition: 2s linear all;
}
到
.fade-fx {
-webkit-transition: 1s linear all;
transition: 2s linear all;
}
关于javascript - ngAnimate 不再工作了吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35136713/
26
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
我是一名优秀的程序员,十分优秀！