Angularjs ngShow上的动画首次跳过

我正试图通过使用一个简单的jQuery slideUp/slideDown来设置twitter引导面板主体打开/关闭的动画，该面板在angular（1.3.2版）中显示为ng show

（我一开始尝试使用css转换，但由于身高未知而无法实现，而max height动画在关闭时给我带来了问题，因此我决定使用JS）

我成功地制作了动画，但第一次就不行了 动画被切换。 因此，第一个实体显示未设置动画，然后隐藏设置动画，之后一切正常（显示和隐藏动画）

Javascript部分：

app.animation('.animate-panel-body-slide', function(){
return {
    addClass : function(element, className, done) {
        $(element).slideUp(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    },
    removeClass : function(element, className, done) {
        $(element).slideDown(400, done);
        return function(isCancelled) {
            if(isCancelled) {
                $(element).stop();
            }
        }
    }
}
});

HTML部分：

<div class="panel panel-default">
    <div class="panel-heading">
        HEADING
    </div>
    <div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen">
        SOME HTML IN BODY...
    </div>
</div>

标题
正文中的一些HTML。。。

---

我遗漏了什么吗？

当执行

removeClass

时，这是因为

ng hide

（设置

display:none

）已从元素中删除

第一次出现这种情况时，元素将具有

display:block

，这意味着元素将立即出现，并且

slideDown

动画将不明显

当面板关闭时，

slideUp

动画将向元素添加

style=“display:none；”

，这意味着下次打开它时，它将按预期工作

如果按如下方式手动添加：

<div class="panel-body animate-panel-body-slide" ng-show="isPanelOpen" style="display: none">

---

角度版本1.3.2。我已经编辑了这个问题以供参考，并且已经接受了你的答案。谢谢，谢谢塔塞卡特给我解释。两种解决方案都有效，我决定实现JS解决方案。

removeClass: function(element, className, done) {

  element.css('display', 'none');
  element.slideDown(400, done);

  ...