本教程操作环境：windows7系统、vue3版，DELL G3电脑。
状态过渡
状态就是数据，它包含了数值、颜色值、属性值等等，所以状态过渡指的就是数据本身的过渡动效。
(相关资料图)
Vue 推荐通过 “数据驱动，响应式更新” 的方式来实现状态过渡。其主要思路就是将一个状态转换为一个响应式变量，然后利用一些动态库去更新这个响应式变量，从而驱动 Vue 的响应式更新，实现过渡的动态效果。
Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：
数字和运算颜色的显示SVG 节点的位置元素的大小和其他的 property这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。
1.状态动画与侦听器
通过侦听器我们能监听到任何数值 property 的数值更新。
可能听起来很抽象，所以让我们先来看看使用 GreenSock 一个例子：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script> {{ animatedNumber }}
<script>new Vue({ el: "#animated-number-demo", data: { number: 0, tweenedNumber: 0 }, computed: { animatedNumber: function() { return this.tweenedNumber.toFixed(0); } }, watch: { number: function(newValue) { gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue }); } }})</script>
登录后复制当你把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 CSS 中的 color 的值，通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子：
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script><script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script> Preview:
{{ tweenedCSSColor }}
<script>var Color = net.brehaut.Color new Vue({ el: "#example-7", data: { colorQuery: "", color: { red: 0, green: 0, blue: 0, alpha: 1 }, tweenedColor: {} }, created: function () { this.tweenedColor = Object.assign({}, this.color) }, watch: { color: function () { function animate () { if (TWEEN.update()) { requestAnimationFrame(animate) } } new TWEEN.Tween(this.tweenedColor) .to(this.color, 750) .start() animate() } }, computed: { tweenedCSSColor: function () { return new Color({ red: this.tweenedColor.red, green: this.tweenedColor.green, blue: this.tweenedColor.blue, alpha: this.tweenedColor.alpha }).toCSS() } }, methods: { updateColor: function () { this.color = new Color(this.colorQuery).toRGB() this.colorQuery = "" } }}).example-7-color-preview { display: inline-block; width: 50px; height: 50px;}</script>
登录后复制2.动态状态过渡
就像 Vue 的过渡组件一样，数据背后状态过渡会实时更新，这对于原型设计十分有用。当你修改一些变量，即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。
Dynamic State Transitions <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", data: function() { var defaultSides = 10; var stats = Array.apply(null, { length: defaultSides }).map( function() { return 100; } ); return { stats: stats, points: generatePoints(stats), sides: defaultSides, minRadius: 50, interval: null, updateInterval: 500 }; }, watch: { sides: function(newSides, oldSides) { var sidesDifference = newSides - oldSides; if (sidesDifference > 0) { for (var i = 1; i <= sidesDifference; i++) { this.stats.push(this.newRandomValue()); } } else { var absoluteSidesDifference = Math.abs(sidesDifference); for (var i = 1; i <= absoluteSidesDifference; i++) { this.stats.shift(); } } }, stats: function(newStats) { TweenLite.to(this.$data, this.updateInterval / 1000, { points: generatePoints(newStats) }); }, updateInterval: function() { this.resetInterval(); } }, mounted: function() { this.resetInterval(); }, methods: { randomizeStats: function() { var vm = this; this.stats = this.stats.map(function() { return vm.newRandomValue(); }); }, newRandomValue: function() { return Math.ceil( this.minRadius + Math.random() * (100 - this.minRadius) ); }, resetInterval: function() { var vm = this; clearInterval(this.interval); this.randomizeStats(); this.interval = setInterval(function() { vm.randomizeStats(); }, this.updateInterval); } } }); function valueToPoint(value, index, total) { var x = 0; var y = -value * 0.9; var angle = ((Math.PI * 2) / total) * index; var cos = Math.cos(angle); var sin = Math.sin(angle); var tx = x * cos - y * sin + 100; var ty = x * sin + y * cos + 100; return { x: tx, y: ty }; } function generatePoints(stats) { var total = stats.length; return stats .map(function(stat, index) { var point = valueToPoint(stat, index, total); return point.x + "," + point.y; }) .join(" "); } </script>
登录后复制3.把过渡放到组件里
管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性，幸好很多的动画可以提取到专用的子组件。我们来将之前的示例改写一下：
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script> + = {{ result }}
<script>// 这种复杂的补间动画逻辑可以被复用// 任何整数都可以执行动画// 组件化使我们的界面十分清晰// 可以支持更多更复杂的动态过渡// 策略。Vue.component("animated-integer", { template: "{{ tweeningValue }}", props: { value: { type: Number, required: true } }, data: function () { return { tweeningValue: 0 } }, watch: { value: function (newValue, oldValue) { this.tween(oldValue, newValue) } }, mounted: function () { this.tween(0, this.value) }, methods: { tween: function (startValue, endValue) { var vm = this function animate () { if (TWEEN.update()) { requestAnimationFrame(animate) } } new TWEEN.Tween({ tweeningValue: startValue }) .to({ tweeningValue: endValue }, 500) .onUpdate(function () { vm.tweeningValue = this.tweeningValue.toFixed(0) }) .start() animate() } }}) // 所有的复杂度都已经从 Vue 的主实例中移除！new Vue({ el: "#example-8", data: { firstNumber: 20, secondNumber: 40 }, computed: { result: function () { return this.firstNumber + this.secondNumber } }})</script>
登录后复制我们能在组件中结合使用这一节讲到各种过渡策略和 Vue 内建的过渡系统。总之，对于完成各种过渡动效几乎没有阻碍。
4.赋予设计生命
只要一个动画，就可以带来生命。不幸的是，当设计师创建图标、logo 和吉祥物的时候，他们交付的通常都是图片或静态的 SVG。所以，虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵，它们看上去实际上并不是活着的。
Vue 可以帮到你。因为 SVG 的本质是数据，我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画，来制作你的欢迎页面、加载指示、以及更加带有情感的提示。
Sarah Drasner 展示了下面这个 demo，这个 demo 结合了时间和交互相关的状态改变：
资源：
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js
HTML代码
Move your mouse or tap
登录后复制CSS代码
body { width: 100vw; height: 100vh; overflow: hidden; font-family: "Montserrat", sans-serif; background: #23a9e0; cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cockroach%20(2).ico"), default; -webkit-overflow-scrolling: touch;}#app { -webkit-tap-highlight-color: transparent;}svg { width: 100vw; height: 100vh; max-height: 400px; margin-left: 20vw;}p { font-size: 16px; color: white; text-align: center;}.isFlipped { transform: scaleX(-1); transform-origin: 50% 50%;}#leftarm { transform-origin: 100% 0;}@media screen and (max-width: 600px) { svg { max-height: 200px !important; margin-left: 0 !important; }}登录后复制JavaScript代码
new Vue({ el: "#app", data() { return { startX: 0, x: 0, y: 0, flip: false, audioPlay: false, startArms: 0 } }, methods: { armsTL() { let tl = new TimelineMax(); tl.add("startarms") tl.to("#backhand", 2, { x: -16, rotation: 150, transformOrigin: "50% 50%" }, "startarms"); tl.to("#rightarm", 2, { rotation: 30, transformOrigin: "100% 0" }, "startarms"); tl.to("#newrightarm", 2, { x: -94, y: -918, rotation: 10, transformOrigin: "100% 100%" }, "startarms"); tl.to("#hand", 2, { x: -15, y: -7, rotation: 90, transformOrigin: "50% 50%" }, "startarms"); tl.to("#leftarm", 2, { rotation: 20, transformOrigin: "100% 0" }, "startarms"); tl.to("#newleftarm", 2, { x: -100, y: -924, transformOrigin: "100% 100%" }, "startarms"); return tl; }, coordinates(e) { const audio = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Whoa.mp3"), walleBox = document.getElementById("walle").getBoundingClientRect(), walleCoords = walleBox.width / 2 + walleBox.left; if (this.startArms == 0) { this.startArms = this.armsTL(); } this.y = e.clientY / 80 - 2; if (e.clientX > walleCoords) { this.x = -(e.clientX / 200); this.flip = true; if (this.audioPlay === false) { audio.play(); this.audioPlay = true; } } else { this.audioPlay = false; this.x = e.clientX / 200 - 5; this.flip = false; TweenMax.set("#righteyeb2", { scaleX: 1 + (1 - e.clientX / walleCoords) / 5 }); TweenMax.set("#lefteyeb2", { scaleX: 1 + (1 - e.clientX / walleCoords) / 5 }); TweenMax.set("#walle", { x: ((e.clientX / walleCoords) * 50) - 40 }); this.startArms.progress(1 - (e.clientX / walleCoords)).pause(); } }, }, mounted() { let tl = new TimelineMax({ repeat: -1, repeatDelay: 2 }); tl.add("redo") tl.to("#lefteye", 0.5, { rotation: 5, repeat: 3, yoyo: true, transformOrigin: "100% 50%", ease: Sine.easeOut }, "redo"); tl.to("#righteye", 0.5, { rotation: -5, repeat: 3, yoyo: true, transformOrigin: "0% 30%", ease: Sine.easeOut }, "redo+=0"); tl.fromTo("#lefteyeball", 0.05, { scaleY: 1 }, { scaleY: 0, repeat: 3, yoyo: true, transformOrigin: "50% 50%", ease: Circ.easeOut }, "redo+=4"); tl.fromTo("#righteyeball", 0.05, { scaleY: 1 }, { scaleY: 0, repeat: 3, yoyo: true, transformOrigin: "50% 50%", ease: Circ.easeOut }, "redo+=4"); tl.to("#eyecontain", 0.4, { rotation: -15, repeat: 1, yoyo: true, transformOrigin: "50% 50%", ease: Sine.easeInOut }, "redo+=2"); }});TweenMax.to("p", 0.5, { opacity: 0, delay: 2, ease: Sine.easeIn});登录后复制【相关推荐：vuejs视频教程、web前端开发】
以上就是vue状态过度使用什么进行监听的详细内容，更多请关注php中文网其它相关文章！
