使用ng-show和ng-animate向上/向下滑动效果

我正在尝试使用ng-animate类似于JQueryslideUp()和的行为slideDown()。只有我宁愿使用ng-show

我在这里查看ng-animate教程-http: //www.yearofmoo.com/2013/04/animation-in-angularjs.html，

我可以在提供的示例中再现淡入/淡出效果。

我如何更改CSS来获得向上/向下滑动的行为？另外，如果可能的话，最好让CSS不知道以像素为单位的组件高度。这样，我可以将CSS重用于不同的元素。

我写了一个slideToggle()没有jQuery的Angular指令。

https://github.com/EricWVGG/AngularSlideables

这实际上很容易做到。您所要做的就是更改CSS。

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

为了使其成为滑动动画，我首先必须将我的元素放在一个盒子（这是幻灯片容器）中，然后我添加了另一个元素来替换要离开的元素，只是因为我认为它看起来不错。删除它，该示例仍然有效。

我将动画CSS从“淡入淡出”更改为“幻灯片”，但请注意，这些是我给它命名的。我本来可以写一个名为“ fade”的幻灯片动画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 1.2+的更新（本文发布时为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中直接设置样式！）和ng-click事件来在CSS和最小的JS中完成。原理是不能设置动画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。

我最终放弃了该问题的其他答案的代码，而是继续使用此答案。

我认为，要做到这一点的最好办法是不使用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);
                }
            });
        }
    }
});

这种基于类的javascript动画可在AngularJS 1.2（和1.4测试）中使用

编辑：我最终放弃了这段代码，朝着完全不同的方向发展。我更喜欢其他答案。在某些情况下，此答案将给您带来一些问题。

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类实现。

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

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

隐藏元素。jQuery不了解这种状态，因此jQuery需要display:none先于第一个向下滑动动画。

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

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

正如您所提到的，实际使用ng-animatefor有什么问题ng-show？

<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>