Vue.js - Fade in/out text in a textarea on button click

user_1487135 0
Viewed 1756

I have a <textarea> that I have bound to some data in my state. When a button is clicked, that data changes and instead of having it immediately change in my textarea, I want to fade out what was previously there and have the new data fade in.

HTML

<button id="submit-button" v-on:click="changeData">Change</button>

<textarea id="dataoutput" rows="14" cols="90" v-model="output" readonly>{{ output }}</textarea>

JS

var app = new Vue({
    el: '#app',
    data: {
        output: "Original data output here"
    },
    methods: {
        changeData: function() {
            // some calculation here
            this.output = // new stuff
        }
    }
});

I've been reading up on Vue transitions and some CSS transitions as well but I can't seem to wrap my head around how to go about doing that. Any help would be greatly appreciated.

vue.js javascript
1 Answers

Just share my approach, by applying style "color: transparent" to textarea, it looks like:

Vue + CSS textarea fade-out-in

// remove vue warning messages
Vue.config.devtools=false;
Vue.config.productionTip = false;

// Vue entry:
new Vue({
    el: '#app',
    data: {
        output: "Original data output here",
        fadeOut: false
    },
    methods: {
        changeData: function() {
          // trigger 'fade-out' class, 
          this.fadeOut = true;
          // wait 500ms for CSS animation (text fade out effect),
          // and then remove 'fade-out' class so text will restore its color
          setTimeout(() => {
            this.output = 'Some other text';
            this.fadeOut = false;
          }, 500);
        }
    }
});
#dataoutput {
  transition: color 0.5s; /* text color transition duration = 500ms */
}

#dataoutput.fade-out {
  color: transparent; /* set text color = transparent */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button id="submit-button" v-on:click="changeData">Change</button>

<textarea id="dataoutput" rows="14" cols="90" v-model="output" readonly v-model="output" :class="{'fade-out': fadeOut}"></textarea>
</div>

user_85475410
Related