You have to toggle the slds-is-open class from the top most div of the dropdown.
Let's say this is your dropdown:
<div class="slds">
<div aura:id="ddId" class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" onclick="{!c.toggleVisibility}">
.....
</div>
</div>
Now in the controller:
toggleVisibility : function(component, event, helper)
{
var ddDiv = component.find('ddId');
$A.util.toggleClass(ddDiv,'slds-is-open');
}
This should do. You can call this toggleVisibility function from blur of the button as well to close the dropdown.
Have this on the button :
onblur="{!c.toggleVisibility}"
UPDATE:
After VarunC's comment that the dropdown hides as soon as you click on it. To avoid that, update the toggleVisibility function which will hide the menu options after small delay.
toggleVisibility : function(component, event, helper)
{
setTimeout(function(){
var ddDiv = component.find('ddId');
$A.util.toggleClass(ddDiv,'slds-is-open');
}, 300);
}
Best Answer
Eric, I suspect your issue is perhaps that you don't have an animation background. What they show on the page you reference are intended more to help demonstrate what happens when the various Lightning Design System "Effects" are applied an object of the same size. They're visual references to illustrate how the effects work when applied to Lightning Design Components.
I have a 3D modeling and animation background. At the top of the page, they mention "3 Principles" which are "Timing", "Elevation" and "Effects". When someone creates an animation or movie, they begin by "story-boarding" it. Later, they move on to "keyframing", which is deciding where they want their objects to be and in what "state" at a specific time in the animation.
Animations are sometimes broken down into "sub-animations", particularly when part of it is repetitive, such as when something vibrates, the legs of a body move as a person walks, their arms swing in rhythm, etc. The same could be said of "squish and squash" effects as a ball bounces.
When the documentation speaks of elevation, they're referring to front and back or "screen depth" where one object will appear as though it's in front or behind another. That allows objects to cast shadows on each other or to appear initially close, then move further away as it shrinks in size on the screen, perhaps even becoming partially obscured by other objects in the animation.
Depending on the type of animation one desires to create, they will "ease in" or "ease out" of transitions. Either that or they will use some other form of "non-linear" transition to make things appear more natural or to illustrate "anticipation". The use of exaggeration is often necessary with animations to convey the desired effect. Watch old Mickey Mouse or Bugs Bunny cartoons and you'll readily see what I mean.
The effects illustrated on the page you've referenced are meant to be used in combination with one another to achieve an overall desired animation that's only limited by one's imagination and the commands available to you along with the frame rates a user will be able to view (ideally 30 frames/sec).
There are many books available on the subject of animation and loads of software for creating them. I recommend you purchase a book on the basics that will help you better understand how to apply those principles using the commands available with the Lightning Design System. I don't think the documentation is intended to teach how to "animate" so much as provide you with examples of what each command does so you can decide how you might choose to utilize it to enhance your pages.