vue中显示和隐藏如何做动画_vue-State Transitions(状态转换)
Vue的过渡系统提供了许多简单的方法来动画进入,离开和列表,但动画数据本身又如何呢?例如:
- 数字和计算
- 显示颜色
- SVG节点的位置
- 元素的大小和其他属性
所有这些都已经存储为原始数字或可以转换为数字。一旦我们这样做了,我们就可以使用第三方库对这些状态更改进行动画处理,以结合Vue的反应性和组件系统。
用观察者动画状态
观察者允许我们将任何数值属性的变化动画成另一个属性。这听起来可能听起来很复杂,所以我们来深入一个使用Tween.js的例子:
{{ animatedNumber }}
new Vue({ el: '#animated-number-demo', data: { number: 0, animatedNumber: 0 }, watch: { number: function(newValue, oldValue) { var vm = this function animate () { if (TWEEN.update()) { requestAnimationFrame(animate) } } new TWEEN.Tween({ tweeningNumber: oldValue }) .easing(TWEEN.Easing.Quadratic.Out) .to({ tweeningNumber: newValue }, 500) .onUpdate(function () { vm.animatedNumber = this.tweeningNumber.toFixed(0) }) .start() animate() } }})
当您更新号码时,更改会在输入下面显示动画。这使得一个很好的演示,但什么东西不是直接存储为一个数字,如任何有效的CSS颜色,例如?以下是我们如何通过添加Color.js来实现这一点:
Update
Preview:
{{ tweenedCSSColor }}
var Color = net.brehaut.Colornew 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;}
动态状态转换
与Vue的转换组件一样,数据支持状态转换可以实时更新,这对原型设计特别有用!即使使用简单的SVG多边形,也可以实现许多难以想象的效果,直到您稍稍使用变量。
请参阅此fiddle以获取上述演示背后的完整代码。
将转换组织成组件
管理许多状态转换可能会快速增加Vue实例或组件的复杂性。幸运的是,许多动画可以提取出专用的子组件。我们用前面例子的动画整数来做这件事:
+ = {{ result }}
+ =
// This complex tweening logic can now be reused between// any integers we may wish to animate in our application.// Components also offer a clean interface for configuring// more dynamic transitions and complex transition// strategies.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() } }})// All complexity has now been removed from the main Vue instance!new Vue({ el: '#example-8', data: { firstNumber: 20, secondNumber: 40 }, computed: { result: function () { return this.firstNumber + this.secondNumber } }})
vue中显示和隐藏如何做动画_vue-State Transitions(状态转换)相关推荐
- 如何在LibreOffice Writer文档中显示,隐藏和更改字段底纹的颜色
Fields in LibreOffice Writer allow you to add data that changes to a document, such as the current d ...
- 2.23怎么在OrCAD原理图中显示与隐藏元器件的Value值?【OrCAD原理图封装库50问解析】
笔者电子信息专业硕士毕业,获得过多次电子设计大赛.大学生智能车.数学建模国奖,现就职于南京某半导体芯片公司,从事硬件研发,电路设计研究.对于学电子的小伙伴,深知入门的不易,特开次博客交流分享经验,共同 ...
- 在windows7系统中显示和隐藏系统保留盘
在windows7系统中显示和隐藏系统保留盘 工具/原料 安装有windows7系统的电脑 步骤/方法 右键"我的电脑",打开"管理": 单击"磁盘管 ...
- Microsoft Excel 教程:如何在 Excel 中显示或隐藏零值?
欢迎观看 Microsoft Excel 教程,小编带大家学习 Microsoft Excel 的使用技巧,了解如何在 Excel 中显示或隐藏零值. 在 Excel 中有时希望将零值显示为空单元格, ...
- Microsoft Excel 教程:如何在 Excel 中显示或隐藏图表图例?
欢迎观看 Microsoft Excel 教程,小编带大家学习 Microsoft Excel 的使用技巧,了解如何在 Excel 中显示或隐藏图表图例. 可以显示或隐藏图表的图例. 显示图例可以向读 ...
- excel中显示隐藏的行_在Excel中显示或隐藏用户提示
excel中显示隐藏的行 When you set up a worksheet for other people to use, data validation messages can help ...
- 精灵图在现代前端中到底有用没,css中显示和隐藏竟有两种不同方式
css基础篇(第七篇) 回顾 在上一讲中我们基本上学习了css中定位的几种方式,包括定位在实际工作中常用的口诀等,除此之外还学习了margin:0 auto 水平居中的效果.未来常用的z-index等 ...
- Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动 无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿 从头至尾再循环播放时没有停顿 实现这种情况可以使用CSS3的动画实现 ...
- word标尺灰色_如何在Microsoft Word中显示和隐藏标尺
word标尺灰色 Rulers in Word help you position text, graphics, tables, and other elements in your documen ...
最新文章
- CI框架表单提交数据接收乱码
- Zookeeper分布式一致性原理(一):分布式架构
- Oracle 把游标说透
- 没有人会告诉您乘坐飞机时的几个事实 但是您一定要知道
- 陶哲轩对数学学习的一些建议
- Windows10 64位 安装 Postgresql 数据库
- linux usb驱动u盘启动不了,Linux环境下USB的原理、驱动和配置(4)
- 蛋壳公寓回应破产传闻:没有破产 也不会跑路
- PHP大文件分割上传(分片上传)
- 游戏设计情境探秘之动画
- 网际风全推数据接口_网际风数据接口飞狐交易师版简要说明.doc
- 单片机控制12864显示多行汉字(含PROTEUS仿真文件、程序和字模提取软件)
- Python中main函数
- Xpose实战一:来,让我们任性登录,替换掉它的登录验证
- zhuan [讲解] OI 字符串 常用哈希方法(by sxy sxy)
- excel打开后灰色不显示内容?
- Hive中使用sort_array函数解决collet_list列表排序混乱问题
- MySQL Workbench建表时 PK NN UQ BIN UN ZF AI 的含义
- 最出色的员工往往最先离职,却不是因为钱,到底为什么?
- java 面试108
热门文章
- 【VB】学生信息管理系统5——数据库代码
- 送给2020年高考的考生
- GPT-3 Finetune
- Recommenders with TensorRT
- 实时实例分割的Deep Snake:CVPR2020论文点评
- 腾讯云https认证
- Could not initialize class org.jetbrains.kotlin.gradle.internal.KotlinSourceSetProviderImplKt
- startActivity(xx,xx.class) 传递数据
- github自己的仓库给别人上传代码的操作
- ubantu中的mysql命令