Replicating jQuery's slideUp() and slideDown() methods
jQuery provides a very useful pair of animation methods, slideUp() and slideDown(), which use JavaScript in order to accomplish the desired results. With the animation hooks provided for you by AngularJS, these animations can be accomplished with CSS.
Getting ready
Suppose that you want to slide a <div> element up and down in the following setup:
(index.html)
<div ng-app="myApp">
<div ng-controller="Ctrl">
<button ng-click="displayToggle=!displayToggle">
Toggle Visibility
</button>
<div>Slide me up and down!</div>
</div>
</div>
(app.js)
angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
$scope.displayToggle = true;
});How to do it…
A sliding animation requires truncation of the overflowing element and a transition involving the height of the element. The following...
The rest of the chapter is locked
83
Tech Concepts
36
Programming languages
73
Tech Tools
Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
50+ new titles added per month and exclusive early access to books as they are being written.
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Authors (1)
Personalised recommendations for you
Based on your interests and search pattern
