我使用的是ngAnimate模块,但我所有的ng-if,ng-show等等,都受到了影响,我想利用ngAnimate对一些选定的元素.对于性能和一些显示和隐藏非常快速的元素的错误.
谢谢.
我正在使用angular-ui-router与angularJS v1.2,并希望实现自定义页面转换.
如何在ui-view(来自angular-ui-router)而不是ng-view(这将是标准方式)中使用ng-animate ？有关ng-view的参考,请参阅AngularJS 1.2中的Remastered Animation.
编辑:我已经尝试了两个不同版本的角度:v1.2.0-rc.2和v1.2.0-rc.3,如评论中所建议的那样,但似乎都没有.我想我可能做错了什么？
这是HTML:
<div ui-view class="slide"></div>
和CSS:
.slide {
width:1024px;
height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
border: 1px solid blue;
}
.slide.ng-enter.ng-enter-active {
border: 1px solid red;
}
我添加了前面提到的示例的JSfiddle.将这个例子展开来覆盖ng-view和ui-view会很好,但我不知道如何将ng/ui-view和部分内容放到JSfiddle中.
我创建了一个表,用户可以在其中增加和减少该值.看小提琴
//sample code as its not allowing me to push the link to JSFiddle with out pasting code
<tr ng-repeat="d in dataSource" ng-animate="'animate'">
// css - as from angular page
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
background-color:Yellow;
}
.animate-enter.animate-enter-active {
background-color:Red;
}
我希望在模型更新时进行动画,即表格列的背景颜色从红色变为白色,以防用户更改值.
因此,当您在任何特定列中单击向上箭头或向下箭头时,该表列的背景颜色将从红色变为白色.
我无法理解它.关于如何实现这一点的任何指针？
我有一个可见性被切换的元素ng-show.我也在使用CSS动画 - 来自ng-animate的自动动画 - 在这个元素上为它的入口设置动画.
元素将包含图像或视频.
在元素包含视频的情况下,我想播放它,但我不想播放视频,直到完成动画制作.
因此,我想知道是否有一种简单的方法将回调绑定到AngularJS中CSS动画的结尾？
该文档引用doneCallback,但我看不到的方式来指定它...
一种解决方法(？)我想到的是$watch荷兰国际集团element.hasClass("ng-hide-add-active"),并等待它用火(true, false),这意味着它只是被删除..
有更好的方法吗？
我是AngularJS 1.2使用ng-animate的新手.我不确定为什么我的ng-animate不能使用某个类名,但是我在一个例子中看到的默认为简单淡入淡出.
在这个例子中,我尝试将我的ng-animate类设置为'animation':http: //plnkr.co/edit/QWQUUVdcLmzLKRvVibqN？p = preview
但是当我使用默认值时,我的动画类名称只是".ng-enter"和".ng-leave",动画中的淡入淡出似乎工作正常.
http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview
任何帮助将不胜感激,谢谢!
我正在使用AngularJS 1.2.11版.我已经设置了一个工具栏,可以使用ng-Animate(显示和隐藏)进行过渡.
这是HTML:
<div>
<div class="full-height">
<menu-main class="full-height pull-left"></menu-main>
<menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
</menu-sub>
</div>
</div>
这是相同工具栏元素的CSS
.animate.fade-hide, .animate..fade-show {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active
{
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-show {
position: fixed;
top: 100px;
opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
position: fixed;
top: …当使用ngAnimate淡入ngRepeat中的每个项目时,当前所有项目同时淡入.在前一项褪色至例如50%之后,每个项目是否可能淡入,从而产生级联效应？
<ul>
<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-fade-enter'}">
<img src="{{phone.img}}"> {{phone.name}}
</li>
</ul>
使用ngAnimate,如果可以延迟每个项目的动画,那将是很好的,例如:
<li ng-repeat="phone in phones" ng-animate="{enter: 'phone-enter', delay: 500}">
有办法解决这个问题吗？
谢谢!
您可以将ng-animate与ng-class一起使用添加和删除动画.我想在CSS3中制作一个动画但是没有找到ng-class online的好例子.所以我想知道人们是否有他们想要分享的好例子.
我不确定我的最终动画会是什么样子,但是为了这个例子的目的,让我说我只想在添加类时使div的高度逐渐增加myclass.
<div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>
**CSS**
.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}
angular 1.1.5 - http://plnkr.co/edit/eoKt8o4MJw9sWdYdeG3s?p=preview - WORKS
角度1.2.6 - http://plnkr.co/edit/WopgAtFNVm1mKf5Li99h?p=preview - 失败
我想我确实遵循了文档中的说明 - http://docs.angularjs.org/api/ngAnimate
•首先在HTML中包含angular-animate.js
•然后通过将模块添加为依赖模块来加载应用程序中的模块
在我的时区已经很晚了,我可能会错过一些明显的东西.我的猜测是 - 1.1.5和1.2.6之间的CSS文件不兼容？真不能说......
反正这里是代码形式调升 plunker,我包括一些意见强调的是,我也跟着从文档的说明:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Top Animation</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<!-- ^^^ load animate -->
</head>
<script>
var app = angular.module('app', ['ngAnimate']); // <-- dependent module
app.controller('Ctrl', function($scope) {
$scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg …这是我第一个使用Angular的项目,我在ng-animate方面遇到了一些麻烦.我做了几个教程,在教程中我得到了一切正常.现在我正在使用Angular进行项目,而我无法让ng-animate正常工作.诸如"ng-enter"和"ng-leave"之类的类不会添加到不同的元素中.
我已经将各种工作脚本与我进行了比较,但却无法找出我做错了什么.
我的标题:
<link rel="stylesheet" href="css/app.css">
<script src="js/libraries/jquery-2.1.1.min.js"></script>
<script src="js/libraries/angular.js"></script>
<script src="js/libraries/angular-animate.js"></script>
<script src="js/libraries/angular-resource.js"></script>
<script src="js/libraries/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
我的HTML:
<div class="view-container">
<div ng-view class="{{pageclass}} view-frame"></div>
</div>
我的app.js.
'use strict';
/* App Module */
var engineShowcaseApp = angular.module('engineShowcaseApp', [
'ngRoute',
'ngAnimate',
'engineShowcaseController',
'engineShowcaseServices'
]);
engineShowcaseApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/main.html',
controller: 'MainCtrl'
}).
when('/chapters/:chapterID', {
templateUrl: 'partials/chapter.html',
controller: 'ChapterCtrl'
});
} ]);
我的controllers.js:
'use strict';
/* Controllers */
var engineShowcaseController = angular.module('engineShowcaseController', []);
engineShowcaseController.controller('MainCtrl', …angularjs ×10
ng-animate ×10
animation ×1
css3 ×1
javascript ×1
ng-class ×1
ng-hide ×1
ng-show ×1