AngularJS ngAnimate让div从div顶部滑入,而不是从页面顶部滑入

时间:2014-03-27 18:24:57

标签: angularjs ng-animate angular-strap animate.css ng-show

我有一个显示和隐藏div的按钮。我只是希望div从div的顶部而不是页面的顶部滑入和滑出。我该怎么做?

控制器:

app.controller('myController', ['$scope', function ($scope) {
    $scope.showDiv = true;
}]);

查看:

<div ui-view>
    <button ng-click="showDiv = !showDiv">Toggle</button><br />
    <div ng-show="showDiv" style="border: solid 1px red">
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
</div>

CSS:

.ng-hide-remove {
    -webkit-animation: slideInDown 0.5s;
    -moz-animation: slideInDown 0.5s;
    -ms-animation: slideInDown 0.5s;
    animation: slideInDown 0.5s;
}

.ng-hide-add {
    -webkit-animation: slideOutUp 1s;
    -moz-animation: slideOutUp 1s;
    -ms-animation: slideOutUp 1s;
    animation: slideOutUp 1s;
    display: block !important;
}

1 个答案:

答案 0 :(得分:2)

使用overflow: hidden; position: relative;将你的div包裹在另一个内,并使用translate2d同时使用position: relative滑动内部div。