Now, we will just edit our web page to add the <puff> component to our cards:
<div id="app"> <button @click="showRecipe = !showRecipe"> Recipe </button> <button @click="showNews = !showNews"> Breaking News </button> <puff> <article v-if="showRecipe" class="card"> <h3> Apple Pie Recipe </h3> <p> Ingredients: apple pie. Procedure: serve hot. </p> </article> </puff> <puff> <article v-if="showNews" class="card"> <h3> Breaking news </h3> <p> Donald Duck is the new president of the USA. </p> </article> </puff> </div>
The cards will now appear and disappear when pressing the button with a "puff" effect.