棱角分明.js动画
Angular.js animations
我有一个带有ng-repeat
的块,定义如下:
<div ng-show="isPageSelected(item.page)" class="block" ng-repeat="item in data">
...
</div>
目前,我可以通过单击某些元素在这些块之间切换。正如您可能已经猜到的那样,它通过ng-show="isPageSelected(item.page)"
工作。一切正常,但它们会立即切换,我想添加一个动画,一个简单的淡入/淡出就可以了。
出,当它消失时,新块应该淡入。当我使用ngAnimate
它们会同时淡入和淡出时。我需要第一个块完全消失并隐藏display: none;
,完成后,下一个块应该出现并淡入。在使用jQuery时,这是一个相当简单的任务,但是我如何使用Angular.js优雅地做到这一点呢?
我强烈怀疑Angular.js对于具有复杂动画的网站来说并不是一个好的选择。
编辑:为了简化我的问题,我需要做的就是
- 在按钮上单击开始动画;
- 动画完成后,更改模型;
- 运行另一个动画。
由于我需要在动画后更改模型,因此可能无法通过纯 CSS 来完成。我知道在 angular 中触发特定元素动画的唯一方法是创建一个指令,将一个范围变量传递到指令中,在指令中为该变量创建观察器,然后从控制器更改变量:
<div animation="page"></div>
app.directive('animation', function(){
return {
scope: { page: '=animation' },
link: function(scope, element){
scope.$watch('page', function(newVal){
...
});
}
};
});
我想它会起作用,但为此创建一个指令似乎真的很臃肿。另外,只有在动画完成后,我如何使用此方法更改$scope.page
?添加另一个范围变量只是为了触发动画,并在动画完成后以某种方式更改$scope.page
?可以使用ngFx
模块来做到这一点,但是它需要的代码量简直荒谬。在这一点上,我认为将jQuery动画添加到控制器将是一种更漂亮的解决方法。
编辑:这就是jQuery动画的样子:
$scope.changePage = function(page) {
$('.block').animate({opacity: 0}, 500, function(){
$scope.page.id = page;
$scope.$apply();
$(this).animate({opacity: 1}, 500);
});
};
它工作正常,不像指令那样冗长,但我必须使用 CSS 选择器,这感觉非常"无角度"。你们在处理动画时会使用类似的东西吗?
编辑:使用ngFx
的方法有些相似:
<div ng-hide="switchPageAnimation"
class="block fx-fade-normal fx-speed-300 fx-trigger">
在控制器中:
$scope.switchPageAnimation = false;
$scope.changePage = function(page) {
if($scope.page.id === page || $scope.switchPageAnimation) return;
$scope.switchPageAnimation = true;
$scope.$on('fade-normal:enter', function(){
$scope.page.id = page;
$scope.switchPageAnimation = false;
});
};
我没有使用CSS选择器,但它看起来仍然很糟糕。我必须为动画定义一个范围变量,然后检查动画是否已经在运行。我觉得我错过了一些非常明显的东西。
也许这会对您有所帮助,在您的情况下,没有必要等待动画完成。如果您的页面具有 css 位置:绝对并且位于位置:相对的容器中,则它们共享相同的位置,并且在动画时不会一个显示在另一个下方。使用此设置,您可以交叉淡入淡出或延迟显示动画
转换延迟:
.container1{
position: relative;
height:400px;
}
.block1{
position:absolute;
}
.block1.ng-hide-add-active {
display: block!important;
-webkit-transition: 2s linear all;
transition: 2s linear all;
}
.block1.ng-hide-remove-active {
display: block!important;
-webkit-transition: 2s linear all;
transition: 2s linear all;
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.block1.ng-hide {
opacity: 0;
}
http://jsfiddle.net/ncrs4gz0/
编辑:如果您在 ng-repeat 中使用过滤器而不是 ng-show 来显示选定的页面,如下所示
<div class="block1" ng-repeat="item in data | filter:isPageSelected">
然后从DOM和Angular Add类ng-enter,ng-enter-active和ng-leave ng-leave-active中添加和删除页面
但动画可以定义类似见小提琴:http://jsfiddle.net/o944epzy/
实际上,您必须使用 CSS 来显示和隐藏 ng-repeat 中的元素;当您使用 ngAnimate 时,不要忘记将其注入到您的模块中。
.module('myModule', [ 'ngAnimate', ...
当您将从ng重复数据源中添加/删除元素时执行此操作。Angular 将添加和删除类ng-enter, ng-leave
。这里有一个关于使用ngAnimate进行动画的好教程。
在您自己的情况下,您想更改页面。我建议你一次显示的项目太多了。
您可以在作用域中声明两个变量:
$scope.elemByPage = 5;
$scope.page = 0;
$scope.nbPages = ...; // I let you do the maths ;)
在您的模板中之后,您可以简单地执行以下操作:
<div class="my-repeat-item" data-ng-repeat="item in data | pager:page:elemByPage">
{{item.xxx}}
</div>
此模板将仅显示所需的项目,以页码和每页元素数的功能。寻呼机是一个简单的过滤器,它可以解决问题
.filter('pager',[function(){
return function(items, page, nbElemByPage) {
if(!nbElemByPage || nbElemByPage < 1) {
return items;
}
var nbPages = Math.floor(items.length/nbElemByPage);
if(nbPages<1) {
return items;
}
var startIndex = page*nbElemByPage;
return items.splice(startIndex, nbElemByPage);
};
}])
现在,您只需要使用允许您浏览项目的按钮
<button data-ng-click="page = page - 1"/>Prev page</button>
<button data-ng-click="page = page - 1"/>Next page</button>
最后,您想在新项目上添加淡入淡出动画,因此请在 css 中声明这些类在您的项目类之后(此处my-repeat-item
.my-repeat-item.ng-enter {
transition: 0.6s ease all;
opacity:0;
}
.my-repeat-item.ng-enter.ng-enter-active {
opacity:1;
}
删除项目时,您可以通过将enter
替换为 leave
来执行相同的操作。
希望它能回答你的问题。
实际上,您必须使用CSS来显示和隐藏ng-repeat中的元素;当您使用ngAnimate时,不要忘记将其注入到模块中。
您可以将所需的过渡添加到元素的 CSS 类中以显示/隐藏:
animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
在此处查看更多内容:https://docs.angularjs.org/api/ng/directive/ngShow#example
事实上,使用CSS是"正确"的方法,即使它可能感觉没有棱角。
- 第节上的全页JS动画
- tween.js动画的奇怪行为
- 速度.js动画两个属性时持续时间不同
- d3.js动画径向图示例
- js动画不平滑
- 基于媒体查询的angular js动画无法调整窗口大小
- blast.js动画与jqueryui彩色动画
- 如何销毁popcorn.js动画
- 在桌面上向下滚动三个js动画,而不是在手机上
- Jasmine规格与Velocity.js动画失败$.Velocity.mock=true
- 为D3.js动画编写绑定的正确方法是什么
- sql到传单js动画标记
- 如何检测Tween.js动画完成
- 拉斐尔.js动画恢复()在片场失败
- 图表.js动画进度进度百分比
- 三个 js 动画形状
- 动态.js动画 包含形状和文本的多个组
- 三个js动画克隆网格
- 棱角分明.js动画
- 拉斐尔JS动画问题