Vue.js-单击按钮在文本区域中淡入/淡出文本

Question

我有一个<textarea>，我已经绑定到某些状态的数据。单击按钮后，该数据会更改，而不是立即在我的文本区域中更改它，我想淡出以前的内容并淡入新数据。

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
        }
    }
});

我一直在学习Vue过渡和一些CSS过渡，但是我似乎无法全神贯注于如何实现这一点。任何帮助将不胜感激。

Answer 1

只需分享我的方法，即将样式“ color: transparent”应用于textarea，就好像：

// 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>