Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

13 Transitions and Animations In this chapter, the following recipes will be covered: Integrating with third-party CSS animation ...

Transitions and Animations Chapter 13 Vue transitions are pretty powerful in that they are completely customizable and can easil ...

Transitions and Animations Chapter 13 How to do it... Imagine that you are creating an app to book taxis. The interface we will ...

Transitions and Animations Chapter 13 You can already tell that we will use the taxiCalled variable to keep track of whether the ...

Transitions and Animations Chapter 13 How does it work... Every transition applies four classes. Two are applied when the elemen ...

Transitions and Animations Chapter 13 Adding your own transition classes If your application is rich in animations and you would ...

Transitions and Animations Chapter 13 At this point, we will create our own custom transition in CSS: .slideInRight { transform: ...

Transitions and Animations Chapter 13 Play (P): We create a transition for every property we have touched. In the taxi example, ...

Transitions and Animations Chapter 13 Getting ready This recipe, while it presupposes no knowledge of the Velocity library, assu ...

Transitions and Animations Chapter 13 The enter method will be called as soon as the taxi emoji is inserted at the press of a bu ...

Transitions and Animations Chapter 13 The syntax of the Velocity function is as illustrated: Velocity( elementToAnimate, propert ...

Transitions and Animations Chapter 13 This will set the opacity to zero just before the animation begins (and hence, before the ...

Transitions and Animations Chapter 13 That was easy enough; now we add our leave transition: <transition @enter="enter" @leav ...

Transitions and Animations Chapter 13 Adding the done arguments to our function lets Vue know that we want a callback to call wh ...

Transitions and Animations Chapter 13 <p> The internet was missing the ability to provide custom-sized placeholder images ...

Transitions and Animations Chapter 13 How it works... The appear directive in the transition tag will make the components appear ...

Transitions and Animations Chapter 13 Maybe it's worth mentioning why we had to add the width and height to our image. The reaso ...

Transitions and Animations Chapter 13 Next, we need the frog and the princess that we will add immediately after the button: < ...

Transitions and Animations Chapter 13 The frog emoji will turn into a princess emoji: How it works... When we wrote the two elem ...

Transitions and Animations Chapter 13 Now if we launch our application again, everything works without using any key attribute. ...