JSFiddle - React, Tailwind, and code Playground

by Marcos F

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<div id="app">
    <button v-on="click: toggleItems('showFirst', 'showSecond')">Toggle</button>
    
    <div
        class="fade"
        v-if="showFirst"
        v-transition="fade">
        First
    </div>
    
    <div
        class="fade"
        v-if="showSecond"
        v-transition="fade">
        Second
    </div>
</div>

CSS

.fade {
    opacity: 1;
    transition: all 0.5s ease;
}

.fade.fade-enter, .fade.fade-leave {
    opacity: 0
}


/* some styling, not important */

.fade {
    color: white;
    padding: 10px;
    margin: 10px;
}

.fade:first-of-type {
    background: salmon;
}
.fade:first-of-type + .fade {
    background: gray;
}

JavaScript

App = new Vue({
    el: '#app',
    
    data: {
        showFirst: true,
        showSecond: false
    },
    
    methods: {
        toggleItems: function(first, second) {
            if(this.$get(first)) {
               this.$set(first, false)
               
                self = this
                setTimeout(function() {
                    self.$set(second, true)
                }, 500)
            }
            else {
                this.$set(second, false)
               
                self = this
                setTimeout(function() {
                    self.$set(first, true)
                }, 500)
            }
               
        }
    }

})