AngularJS ngAnimate заставить div скользить сверху div, а не с верхней части страницы

У меня есть кнопка, которая показывает и скрывает 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;
}

angularjs animate.css ng-animate ng-show angular-strap
person adam0101    schedule 27.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Оберните свой div внутри другого с помощью overflow: hidden; position: relative; и используйте translate2d, чтобы сдвинуть внутренний div также с помощью position: relative.

person pocesar    schedule 27.03.2014
comment
Спасибо! Просто обернуть его в div с overflow: hidden было все, что мне нужно было сделать, чтобы получить желаемый эффект. - person adam0101; 27.03.2014
comment
Можете дать полный ответ? - person Demodave; 21.12.2015