Question

我正在开发一个角度应用程序，我在按钮点击时使用ng-show属性中的动画来显示和隐藏div元素。它在隐藏案例中工作正常但在展示案例中它不能正常工作它会立即显示没有动画的元素。您可以在示例中看到相同的行为：http://yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-show-hide。

我的代码是

<div class="row-fluid">
                        <button class="btn btn-large btn-success pull-right" type="button" ng-click="showtravelSchedule=!showtravelSchedule">Search</button>
                   </div>

    <div class=" span3 module offset1 community-bulletin" ng-show="showtravelSchedule" ng-animate="{show: 'example-show', hide: 'example-hide'}">
    </div>

和css是

.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}

.example-show {
opacity:0;
}
.example-show.example-show-active {
opacity:1;
}

.example-hide {
opacity:1;
}
.example-hide.example-hide-active {
opacity:0;
}

Answer 1

我重构了一下，似乎正在使用这个设置：

    .example-show, .example-hide {
        -webkit-transition:all linear 0.5s;
        -moz-transition:all linear 0.5s;
        -ms-transition:all linear 0.5s;
        -o-transition:all linear 0.5s;
        transition:all linear 0.5s;
    }

    .example-show.example-show-active,
    .example-hide {
        opacity:1;
    }

    .example-hide.example-hide-active,
    .example-show {
        opacity:0;
    }

不确定为什么会有所作为。

Ang-JS动画与ng-show无法正常工作

1 个答案: