Question

我通过将鼠标悬停在这个li上来进行角色动画，它会在显示buttonHolder类时动画，但不会在mouseleave上显示。它会消失。

<li class='notifyItem' ng-repeat="product in notify.notifications" ng-mouseenter="notify.showButtons(product)" ng-mouseleave="notify.showButtons(product)">

这是功能：

this.showButtons = function(idx) {

            idx.buttonShow = !idx.buttonShow;
        };

以下是动画按钮：

<button ng-show='product.buttonShow' class='buttonHolder caseButton btn-mini'>Create Case</button>

这是CSS：

.buttonHolder.ng-hide-remove {
height: 0;
transition: height .1s;}

.buttonHolder.ng-hide-remove.ng-hide-remove-active {
height: 25px;}

仅供参考，我从http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

获取了有关动画的信息

Answer 1

这是我最后添加以使其工作的原因：

.buttonHolder.ng-hide-add { height: 25px; transition: height .08s; }  
.buttonHolder.ng-hide-add-active { height: 0; }

当我只使用ng-show时，似乎都使用了ng-hide和ng-show。因此，需要两组类来为动画提供两种方式。

Angular ng-show没有隐藏动画

1 个答案: