transitions是什么意思？用法、例句 vue-State Transitions（状态转换）

大家好，今天来为大家分享transitions是什么意思？用法、例句的一些知识点，和vue-State Transitions（状态转换）的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

Vue的过渡系统提供了许多简单的方法来动画进入，离开和列表，但动画数据本身又如何呢？例如：

所有这些都已经存储为原始数字或可以转换为数字。一旦我们这样做了，我们就可以使用第三方库对这些状态更改进行动画处理，以结合Vue的反应性和组件系统。

用观察者动画状态

观察者允许我们将任何数值属性的变化动画成另一个属性。这听起来可能听起来很复杂，所以我们来深入一个使用Tween.js的例子：

<scriptsrc="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>\n<divid="animated-number-demo">\n<inputv-model.number="number"type="number"step="20">\n<p>{{animatedNumber}}</p>\n</div>\nnewVue({\nel:'#animated-number-demo',\ndata:{\nnumber:0,\nanimatedNumber:0\n},\nwatch:{\nnumber:function(newValue,oldValue){\nvarvm=this\nfunctionanimate(){\nif(TWEEN.update()){\nrequestAnimationFrame(animate)\n}\n}\nnewTWEEN.Tween({tweeningNumber:oldValue})\n.easing(TWEEN.Easing.Quadratic.Out)\n.to({tweeningNumber:newValue},500)\n.onUpdate(function(){\nvm.animatedNumber=this.tweeningNumber.toFixed(0)\n})\n.start()\nanimate()\n}\n}\n})\n

当您更新号码时，更改会在输入下面显示动画。这使得一个很好的演示，但什么东西不是直接存储为一个数字，如任何有效的CSS颜色，例如？以下是我们如何通过添加Color.js来实现这一点：

<scriptsrc="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>\n<scriptsrc="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>\n<divid="example-7">\n<input\nv-model="colorQuery"\nv-on:keyup.enter="updateColor"\nplaceholder="Enteracolor"\n>\n<buttonv-on:click="updateColor">Update</button>\n<p>Preview:</p>\n<span\nv-bind:style="{backgroundColor:tweenedCSSColor}"\nclass="example-7-color-preview"\n></span>\n<p>{{tweenedCSSColor}}</p>\n</div>\nvarColor=net.brehaut.Color\nnewVue({\nel:'#example-7',\ndata:{\ncolorQuery:'',\ncolor:{\nred:0,\ngreen:0,\nblue:0,\nalpha:1\n},\ntweenedColor:{}\n},\ncreated:function(){\nthis.tweenedColor=Object.assign({},this.color)\n},\nwatch:{\ncolor:function(){\nfunctionanimate(){\nif(TWEEN.update()){\nrequestAnimationFrame(animate)\n}\n}\nnewTWEEN.Tween(this.tweenedColor)\n.to(this.color,750)\n.start()\nanimate()\n}\n},\ncomputed:{\ntweenedCSSColor:function(){\nreturnnewColor({\nred:this.tweenedColor.red,\ngreen:this.tweenedColor.green,\nblue:this.tweenedColor.blue,\nalpha:this.tweenedColor.alpha\n}).toCSS()\n}\n},\nmethods:{\nupdateColor:function(){\nthis.color=newColor(this.colorQuery).toRGB()\nthis.colorQuery=''\n}\n}\n})\n.example-7-color-preview{\ndisplay:inline-block;\nwidth:50px;\nheight:50px;\n}\n

动态状态转换

与Vue的转换组件一样，数据支持状态转换可以实时更新，这对原型设计特别有用！即使使用简单的SVG多边形，也可以实现许多难以想象的效果，直到您稍稍使用变量。

请参阅此fiddle以获取上述演示背后的完整代码。

将转换组织成组件

管理许多状态转换可能会快速增加Vue实例或组件的复杂性。幸运的是，许多动画可以提取出专用的子组件。我们用前面例子的动画整数来做这件事：

OK，本文到此结束，希望对大家有所帮助。