使用 ng-show 和 ng-animate 向上/向下滑动效果 [英] Slide up/down effect with ng-show and ng-animate

问题描述

我正在尝试使用 ng-animate 来获得类似于 JQuery 的 slideUp() 和 slideDown() 的行为.只有我宁愿使用 ng-show

I'm trying to use ng-animate to get a behavior similar to JQuery's slideUp() and slideDown(). Only I'd rather use ng-show

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

I'm looking at the ng-animate tutorial here - http://www.yearofmoo.com/2013/04/animation-in-angularjs.html,

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

and I can reproduce the fade in/out effect in the example provided.

如何更改 css 以获得向上/向下滑动的行为?此外，如果可能，最好让 css 不知道组件高度(以像素为单位).这样我就可以为不同的元素重用 css.

How could I change the css to get slide up/down behaviour? Also, if possible, it's better that the css doesn't know about the component height in pixels. That way I can reuse the css for different elements.

推荐答案

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

I've written an Angular directive that does slideToggle() without jQuery.

https://github.com/EricWVGG/AngularSlideables

这篇关于使用 ng-show 和 ng-animate 向上/向下滑动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！