74

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

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

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

我怎样才能改变css来获得向上/向下滑动的行为？此外，如果可能，最好让 css 不知道组件高度（以像素为单位）。这样我就可以将 css 重用于不同的元素。

4

8 回答 8

87

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

https://github.com/EricWVGG/AngularSlideables

于 2013-11-01T21:51:57.413 回答
40

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

于 2013-06-03T12:41:17.130 回答
17

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

（笨蛋）

于 2013-12-21T17:14:05.653 回答
16

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

于 2015-03-11T18:15:12.797 回答
8

我最终放弃了我对这个问题的其他答案的代码，而是选择了这个答案。

我相信做到这一点的最好方法是根本不使用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);
                }
            });
        }
    }
});
于 2015-08-20T19:05:33.737 回答
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'})在方法中包含该行，因为除非元素处于启动 jQuery 动画之前beforeRemoveClass的状态，否则 jQuery 不会执行 slideDown 。display: noneAngularJS 使用 CSS 

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

隐藏元素。jQuery 不知道这种状态，并且 jQuery 需要在display:none第一个向下滑动动画之前。

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

于 2015-07-20T18:52:05.240 回答
3

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

于 2013-05-21T19:28:55.367 回答
0

如您所述，实际使用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>
于 2016-04-01T15:38:09.597 回答