Using CSS transitions

- [Instructor] Next we'll take a look at CSS transitions.…These are mostly a concern of CSS,…but Vue can help us apply the transitions…at the right times, such as when elements are added,…or removed from the DOM.…To help demonstrate, I've added a link…under this summary section to allow a user…to toggle its display.…So you can see here, I've added a data property…called showSummary, initialized to true,…and then up here, I've added it…as an additional check on the v-if.…

It can be changed from true to false…and back again when this link is clicked.…But this happens instantly, and if I wanted…to show a more gradual transition…between those two states with some movement,…it would be pretty tricky to do it with CSS alone…and also make sure the styles are applied…at the right times.…With Vue, all we have to do is define…the v dash CSS classes that you see named here.…We typically won't even use all of these classes.…

For example, v-leave defines the starting state…when it's about to go from visible to hidden.…In this case, that's just the default,…