我有一个显示和隐藏 div 的按钮。我只是希望 div 从 div 顶部滑入和滑出,而不是从页面顶部滑入和滑出。我该怎么做?
Controller :
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;
}
最佳答案
使用 overflow:hidden; 将你的 div 包裹在另一个 div 中。 position:relative;
,并使用translate2d以position:relative
滑动内部div。
关于AngularJS ngAnimate让div从div顶部滑入,而不是页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22696121/