使用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从“淡入淡出”改为“滑动”，但请注意，这些是我给它起的名字。我本可以写幻灯片动画css，命名为“fade”，或者其他任何东西。

重要的部分是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+ (本文发布时为1.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)