基于基于Vue过渡状态实例讲解过渡状态实例讲解
下面小编就为大家带来一篇基于Vue过渡状态实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个
参考。一起跟随小编过来看看吧
前面的话前面的话
Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢？包括数字和运算、
颜色的显示、SVG 节点的位置、元素的大小和其他的属性等。所有的原始数字都被事先存储起来，可以直接转换到数字。做
到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态
状态动画状态动画
通过watcher，能监听到任何数值属性的数值更新
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>
<script src="Tween.js"></script>
<script src="vue.js"></script>
<script>
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()
}
}
})
</script>
当把数值更新时，就会触发动画。这个是一个不错的演示，但是对于不能直接像数字一样存储的值，比如 CSS 中的 color 的
值，通过下面的例子来通过 Color.js 实现一个例子：
<div id="example">
<input v-model="colorQuery" @keyup.enter="updateColor" placeholder="Enter a color">
<button @click="updateColor">Update</button>
<p>Preview:</p>
<span :style="{ backgroundColor: tweenedCSSColor }" style="display: inline-block;width: 50px;height: 50px;"></span>
<p>{{ tweenedCSSColor }}</p>
</div>
<script src="Tween.js"></script>
<script src="vue.js"></script>
<script src="color.js"></script>
<script>
var Color = net.brehaut.Color
new Vue({
el: '#example',
data: {
colorQuery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
},
created: function () {
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38630358
- 粉丝: 5
- 资源: 899
我的内容管理
展开
最新资源
- C++多态实现机制详解：虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统：无向图实现最短路径探索
- SQL2005彻底删除指南：避免重装失败
- GTD时间管理法：提升效率与组织生活的关键
- Python进制转换全攻略：从10进制到16进制
- 商丘物流业区位优势探究：发展战略与机遇
- C语言实训：简单计算器程序设计
- Oracle SQL命令大全：用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解：电路与程序设计
- 反激开关电源设计：UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程：创建员工层级结构
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
