JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://172.20.41.89:8000/dist/vue.js"></script>

<svg width="100px" height="100px" v-class="red: red"
  class="msg" v-if="show" v-transition></svg>

<p v-on="click: show = !show">click</p>
<p v-on="click: red = !red">red</p>

CSS

svg {
    background: black;
}
svg.red {
    background: red;
}
.msg {
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    overflow: hidden;
}
.msg.v-enter, .msg.v-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
}

JavaScript

new Vue({
    el: 'body',
    data: {
        red: false,
        show: true
    }
})