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

Question

我试图用ng-animate得到类似JQuery的行为slideUp()和slideDown().只有我宁愿使用ng-show

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

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

如何更改css以获得上滑/下滑行为？另外,如果可能的话,css最好不知道组件高度(以像素为单位).这样我就可以将css重用于不同的元素.

Answer 1

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

https://github.com/EricWVGG/AngularSlideables

Answer 2

这实际上很容易做到.你所要做的就是改变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/.希望这可以帮助!

Answer 3

更新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;
}

(plunker)

Answer 4

这实际上可以在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.

Answer 5

我最后放弃了代码来解决这个问题的其他答案,而是选择了这个答案.

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

Answer 6

这个基于类的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类.