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

我编写了一个 Angular 指令，它在没有 jQuery 的情况下执行 slideToggle()。

https://github.com/EricWVGG/AngularSlideables

Answer 2

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

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

为了让它变成一个滑动动画，我首先必须把我的元素放在一个盒子里（那是滑动容器），然后我添加了另一个元素来替换那个离开的元素，只是因为我觉得它看起来不错.取出它，示例仍然有效。

我将动画 css 从 'fade' 更改为 'slide' 但请注意这些是我给它起的名字。我本可以编写名为“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: ...
}

见this fiddle by the excellent Lea Verou

作为 cmets 中提出的一个问题，请注意，虽然此动画与线性缓动完美配合，但任何指数缓动都会产生与预期不同的行为 - 因为动画属性是 max-height 而不是height 本身；具体来说，只会显示max-height 的缓动曲线的height 部分。

Answer 5

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

我认为最好的方法是完全不使用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 测试）中工作

编辑：我最终放弃了这段代码，走向了完全不同的方向。我喜欢my other answer much better。这个答案会在某些情况下给你带来一些问题。

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'}) 行，因为除非元素在开始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 类。

Answer 7

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

Answer 8

你提到的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>