Vue JS文本添加动画

Question

当我单击一个组件时，文本会更改。是否可以使添加的文本平滑地动画，并增加块的高度？

一些例子：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, i need smooth animation when text added(click me please)'
  }
})

new Vue({
  el: '#app2',
  data: {
    message: 'Hello, i need smooth animation when text added(click me please)'
  },
  methods: {
  	addText() {
    console.log('1');
    	TweenLite.to(document.getElementById('test'), 2, {text:"This is animation with GSAP (vue plugin to animate anything) and i don't know how to animate it smooth", ease:Linear.easeNone});
    }
  }
})

#app, #app2 {
  border: 1px solid black;
  width: 150px;
  text-align: center;
}

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/TextPlugin.min.js"></script>

<div id="app" @click="message = message+message+message">
  <p>{{ message }}</p>
</div>

<div id="app2" @click="addText">
  <p id="test">{{ message }}</p>
</div>

Answer 1

U可以观看文本值。像这样doc。

Answer 2

是的！实际上，Vue提供了一个非常强大的引擎，可以使用称为“过渡”的概念执行几乎所有类型的Web GUI动画。您只需要了解基本的CSS！这是它的主要文档，在Google上还有很多其他示例。

https://vuejs.org/v2/guide/transitions.html