使用 n- 显示和 n- 动画的上下滑动效果

你应该使用 Javascript 动画-这是不可能的纯 CSS，因为你不能知道任何元素的高度。按照它为您提供的关于 javascript 动画实现的说明，从 jQuery 的源代码中复制 slideUp 和 slideDown。

这其实很简单，你只需要修改 css。

这里有一个非常简单的淡出动画小提琴: http://jsfiddle.net/elthrasher/sNpjH/

为了使它成为一个滑动动画，我首先必须把我的元素放在一个盒子里(这是幻灯片容器) ，然后我添加了另一个元素来替换那个正在离开的元素，只是因为我认为它看起来会很好。把它拿出来，这个例子仍然有效。

我改变了动画的 css 从’淡出’到’幻灯片’，但请注意，这些是我给它的名称。我可以写幻灯片动画 CSS 命名为“淡出”或任何其他事情。

最重要的部分是 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 指令，它在没有 jQuery 的情况下执行 slideToggle()。

Https://github.com/ericwvgg/angularslideables

角度1.2 + 的最新版本(本文发表时为1.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事件。原则是，一个不能动画 height: 0;到 height: auto;，但这可以通过动画 max-height属性欺骗。当设置 .foo-open时，容器将扩展到它的“自动高度”值-不需要固定高度或定位。

.foo {
max-height: 0;
}


.foo--open {
max-height: 1000px; /* some arbitrary big value */
transition: ...
}

见 这把由优秀的 Lea Verou 拉的小提琴

作为评论中提出的一个问题，请注意，虽然这个动画与线性宽松完美地工作，任何指数宽松将产生一个不同于预期的行为-由于事实上，动画属性是 max-height而不是 height本身; 具体来说，只有 height部分的宽松曲线的 max-height将显示。

这个基于类的 javascript 动画可以在 AngularJS 1.2(和1.4测试)中工作

Edit : 我最终放弃了这段代码，转向了一个完全不同的方向。我喜欢 我的另一个答案好多了。这个答案会在某些情况下给你一些问题。

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类添加到容器元素中，就可以基于 ng-hide 类实现 jQuery 下拉行为。

必须在 beforeRemoveClass方法中包含 $(element).css({display:'none'})行，因为除非元素在启动 jQuery 动画之前处于 display: none状态，否则 jQuery 不会执行 slideDown。AngularJS 使用 CSS

.ng-hide:not(.ng-hide-animate) {
display: none !important;
}

来隐藏元素。JQuery 没有意识到这种状态，并且 jQuery 在第一次下滑动画之前需要 display:none。

AngularJS 动画将在动画发生时添加 .ng-hide-animate和 .ng-animate类。

我最终放弃了 另一个答案的代码来回答这个问题，而选择了这个答案。

我相信最好的方法是根本不使用 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);
}
});
}
}
});

正如您所提到的，对 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>