Question

我尝试使用ng-animate来获得类似于JQuery＆＃39; 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'的幻灯片动画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属性的动画来制作。容器将扩展到它的自动高度＆＃34;设置.foo-open时的值 - 不需要固定高度或定位。

.foo {
    max-height: 0;
}

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

请参阅this fiddle by the excellent Lea Verou

作为评论中提出的问题，请注意虽然此动画与线性缓动完美配合，但任何指数缓动都会产生与预期不同的行为 - 因为动画属性为max-height而不是height本身;具体而言，只会显示height的缓动曲线的max-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类实现。

您必须在$(element).css({display:'none'})方法中包含beforeRemoveClass行，因为除非在启动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-animate实际使用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>

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

8 个答案: