用ng-show和ng-animate来上下滑动效果
我试图使用ng-animate来获得类似于JQuery的slideUp()和slideDown() 。 只有我宁愿使用ng-show
我正在看这里的ng-animate教程 – http://www.yearofmoo.com/2013/04/animation-in-angularjs.html ，
我可以在提供的示例中重现淡入/淡出效果。
我怎么能改变CSS来获得上下滑动的行为？ 另外，如果可能的话，最好是CSS不知道像素的组件高度。 这样我可以重用CSS不同的元素。
我写了一个没有jQuery的slideToggle()的Angular指令。
这实际上很容易做到。 所有你需要做的就是改变CSS。
这是一个非常简单的淡出animation小提琴： http : //jsfiddle.net/elthrasher/sNpjH/
为了使它成为一个滑动的animation，我首先必须把我的元素放在一个盒子（这是幻灯片容器），然后我添加了另一个元素，以取代正在离开，因为我认为它会看起来不错。 拿出来，这个例子仍然可以工作。
我将animationCSS从“淡入淡出”改为“幻灯片”，但请注意这些是我给出的名称。 我可以写幻灯片animationCSS命名为“淡出”或其他任何事情。
重要的部分是什么在CSS中。 这是原来的“淡入淡出”CSS：
.fade-hide, .fade-show { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } .fade-hide { opacity:1; } .fade-hide.fade-hide-active { opacity:0; } .fade-show { opacity:0; } .fade-show.fade-show-active { opacity:1; }
此代码将元素的不透明度从0（完全透明）更改为1（完全不透明）并再次返回。 解决办法是单独保留不透明度，而改变顶部（或左侧，如果你想左右移动）。
.slide-hide, .slide-show { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; } .slide-hide { position: relative; top: 0; } .slide-hide.slide-hide-active { position: absolute; top: -100px; } .slide-show { position: absolute; top: 100px; } .slide-show.slide-show-active { position: relative; top: 0px; }
我也正在从相对的绝对定位，所以只有一个元素一次占用容器中的空间。
这是完成的产品： http : //jsfiddle.net/elthrasher/Uz2Dk/ 。 希望这可以帮助！
Angular 1.2+更新（本post发布时的v1.2.6）：
.stuff-to-show { position: relative; height: 100px; -webkit-transition: top linear 1.5s; transition: top linear 1.5s; top: 0; } .stuff-to-show.ng-hide { top: -100px; } .stuff-to-show.ng-hide-add, .stuff-to-show.ng-hide-remove { display: block!important; }
（ 猛击 ）
这实际上可以用CSS和最小的JS完成，只需通过添加一个CSS类（不要直接在JS中设置样式），例如使用ng-click事件。 原则是不能animationheight: 0; 到height: auto; 但这可以通过animation的max-height属性来欺骗。 当设置.foo-open时，容器将扩展为“自动调整高度”值 – 不需要固定高度或定位。
.foo { max-height: 0; } .foo--open { max-height: 1000px; /* some arbitrary big value */ transition: ... }
看到优秀的Lea Verou这个小提琴
作为一个在评论中提出的问题，请注意，虽然这个animation完美的线性宽松，任何指数宽松都会产生一个不同于预期的行为 – 由于animation属性是max-height而不是height本身; 具体而言，只会显示max-height缓动曲线的height分数。
我最终放弃了这个问题的其他答案的代码，而是用这个答案。
我相信最好的办法是不要使用ng-show和ng-animate 。
/* Executes jQuery slideDown and slideUp based on value of toggle-slidedown attribute. Set duration using slidedown-duration attribute. Add the toggle-required attribute to all contained form controls which are input, select, or textarea. Defaults to hidden (up) if not specified in slidedown-init attribute. */ fboApp.directive('toggleSlidedown', function(){ return { restrict: 'A', link: function (scope, elem, attrs, ctrl) { if ('down' == attrs.slidedownInit){ elem.css('display', ''); } else { elem.css('display', 'none'); } scope.$watch(attrs.toggleSlidedown, function (val) { var duration = _.isUndefined(attrs.slidedownDuration) ? 150 : attrs.slidedownDuration; if (val) { elem.slideDown(duration); } else { elem.slideUp(duration); } }); } } });
这个基于类的JavaScriptanimation在AngularJS 1.2（和1.4testing）
编辑 ：我放弃了这个代码，走了一个完全不同的方向。 我更喜欢我的其他答案 。 这个答案在某些情况下会给你一些问题。
myApp.animation('.ng-show-toggle-slidedown', function(){ return { beforeAddClass : function(element, className, done){ if (className == 'ng-hide'){ $(element).slideUp({duration: 400}, done); } else {done();} }, beforeRemoveClass : function(element, className, done){ if (className == 'ng-hide'){ $(element).css({display:'none'}); $(element).slideDown({duration: 400}, done); } else {done();} } }
}）;
只需将.ng-hide-toggle-slidedown类添加到容器元素中，jQuery的下滑行为将基于ng-hide类实现。
你必须在beforeRemoveClass方法中包含$(element).css({display:'none'})行，因为除非元素在启动jQueryanimation之前处于display: none状态，否则jQuery不会执行slideDown。 AngularJS使用CSS
.ng-hide:not(.ng-hide-animate) { display: none !important; }
隐藏元素。 jQuery没有意识到这种状态，jQuery将需要在第一个向下滑动animation之前display:none 。
AngularJSanimation将在animation发生时添加.ng-hide-animate和.ng-animate类。
你应该使用Javascriptanimation – 这是不可能在纯CSS，因为你不知道任何元素的高度。 按照它为您提供的有关JavaScriptanimation实现的说明，并从jQuery源代码复制slideUp和slideDown。
如你所说，为ng-show实际使用ng-animate有什么问题？
<script src="lib/angulr.js"></script> <script src="lib/angulr_animate.js"></script> <script> var app=angular.module('ang_app', ['ngAnimate']); app.controller('ang_control01_main', function($scope) { }); </script> <style> #myDiv { transition: .5s; background-color: lightblue; height: 100px; } #myDiv.ng-hide { height: 0; } </style> <body ng-app="ang_app" ng-controller="ang_control01_main"> <input type="checkbox" ng-model="myCheck"> <div id="myDiv" ng-show="myCheck"></div> </body>
