We will transform a frog into a princess with some kisses, but if we kiss too much the princess will turn into Santa. Of course, we are talking about emojis.
Our HTML setup is very simple:
<div id="app"> <button @click="kisses++">Kiss!</button> <transition :name="kindOfTransformation" :mode="transformationMode"> <p :key="transformation">{{emoji}}{{transformation}}</p> </transition> </div>
Just note that most of the attributes here are bound to variables. Here is how the JavaScript unfolds.
First, we will create a simple Vue instance with all of our data:
new Vue({ el: '#app', data: { kisses: 0, kindOfTransformation: ...
