Angular ng-show没有隐藏动画

时间:2014-09-18 17:26:15

标签: javascript html angularjs animation

我通过将鼠标悬停在这个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

获取了有关动画的信息

1 个答案:

答案 0 :(得分:0)

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

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

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