Question

我试图使我的div2显示类似于SlideUp-Click to Toggle按钮here。

我的code显示其无效。按钮＆＃34;打开第二个div＆＃34;并且＆＃34;隐藏这个div＆＃34;用于显示/隐藏第二个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，第一个是切换的示例，另一个是强制它。

Answer 2

这是因为您正在尝试过渡到height: 0，而这是您无法做到的。

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

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

Answer 3

你不必为此做这么复杂的事情。我使用简单的css过渡和ng-class实现了。

您可以查看Keystonejs

我的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>

希望这对你有用。

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

3 个答案: