我有一个<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过渡,但是我似乎无法全神贯注于如何实现这一点。任何帮助将不胜感激。
答案 0 :(得分: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>