7. Animations and Transitions

Activity 7.01: Building a Messages App with Transition and GSAP

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, visit https://packt.live/399tZ3Y.

1. We will reuse the code created in Chapter 6, Routing for the Message app so we have all the routing setup accordingly.

   The template section of src/views/MessageEditor.vue will be as follows:

   <template>
     <div>
       <textarea
         ref="textArea"
         @change="onChange($event)"
       >
       </textarea>
       <button @click="onSendClick()">Submit</button>
     </div>
   </template>

2. Next, the script section of src/views/MessageEditor.vue should contain logic for both clicking on and leaving the route...