使用 nganimate 在动画期间未显示 div

Question

我正在尝试让我的 div2 显示类似于 SlideUp-Click to Toggle button here。

我的code 显示它不起作用。 “打开第二个 div”和“隐藏此 div”按钮用于显示/隐藏第二个 div。显示/隐藏确实有效，但动画无效。请帮忙。

    var myElement = angular.element( document.querySelector('#div2') );
    myElement.addClass('ng-hide');

    $scope.openSecondDiv = function() {
        var myElement = angular.element( document.querySelector('#div2') );
        myElement.removeClass('ng-hide');
    }
    $scope.hideSecondDiv = function() {
        var myElement = angular.element( document.querySelector('#div2') );
        myElement.addClass('ng-hide');
    }

Answer 1

不用所有的控制器逻辑，直接用ng-show作为属性怎么样：

<div class="row teal" id="div1">
    <button class="btn" ng-click="showDiv2 = !showDiv2">Open second div</button>
</div>

<div style="background: orange;" class="row cssSlideUp" ng-show='showDiv2'>
    <button class="btn" ng-click="showDiv2 = false">Hide this div</button>
</div>

对于 ng-clicks，第一个是切换示例，另一个强制它为 false。

Answer 2

这是因为您正在尝试转换到 height: 0，这是您无法做到的。

将 height 更改为 max-height 可以解决您的代码问题，如更新的 plunkr 中所示：http://plnkr.co/edit/O4rT2bSsr3KnufQMYuhx?p=preview

但正如其他人所说，您不应该这样做。您应该只使用 Angular 而不是 .addClass 切换类。

Answer 3

您不必为此做如此复杂的事情。我已经使用简单的 css 转换和 ng-class 实现了。

您可以查看this plunker

我的css 实现：

div {
    white-space: pre;
    background: #eee;
    color: #333;
    overflow:hidden;
    height:0;
    opacity:0;
    transition:height 1s, opacity 1s;
    -moz-transition:height 1s opacity 1s;
    -webkit-transition:height 1s opacity 1s;
    -o-transition:height 1s opacity 1s;
    -ms-transition:height 1s opacity 1s;
}
.changed {
    height:200px;
    opacity: 1;
}

我的html 实现

<button class="btn" ng-click="hideSecondDiv()">Hide this div</button>
<div ng-class="{changed:clicked === true}" id="div2">

</div>

希望这对你有用。