JSFiddle - React, Tailwind, and code Playground

by bc_rikko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.min.js"></script>
<div id="transition-demo">
    <input type="text" v-model="input | validator" />
    <p class="success" v-if="validationInput" v-transition="input">入力値：{{input}}  OKです！</p>
    <p class="error" v-if="!validationInput" v-transition="input">入力値：{{input}}  ダメです！</p>
</div>

CSS

.success {
    color: green;
}
.error {
    color: red;
}
.input-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.input-enter, .input-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

JavaScript

new Vue({
    el: '#transition-demo',
    data: {
        input: '',
        validationInput: false
    },
    filters: {
        validator: function(value) {
            if (value.length > 4) {
                this.validationInput = true;
            } else {
                this.validationInput = false;
            }
            return value;
        }
    }
});