AngularJS ngAnimate get div to slide in from top of div, not top of page

Question

I have a button that shows and hides a div. I just want the div to slide in and out from the top of the div instead of the top of the page. How would I do this?

Controller:

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

View:

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

Answer 1

Wrap your div inside another with overflow: hidden; position: relative;, and use translate2d to slide the inner div with position: relative as well.