1

我正在开发一个角度应用程序,我在按钮单击时使用 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;
}
4

1 回答 1

0

我对其进行了一些重构,它似乎可以使用以下设置:

    .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;
    }

不知道为什么会有所不同。

于 2013-06-17T18:05:47.327 回答