Vue.js教程
2.3.4 给设计赋予生命
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 过渡和动画概述

Vue.js 进入/离开过渡

Vue.js 列表过渡

把过渡放到组件里

动态状态过渡

状态动画与侦听器

给设计赋予生命

只要一个动画,就可以带来生命。不幸的是,当设计师创建图标、logo 和吉祥物的时候,他们交付的通常都是图片或静态的 SVG。所以,虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵,它们看上去实际上并不是活着的。

Vue 可以帮到你。因为 SVG 的本质是数据,我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画,来制作你的欢迎页面、加载指示、以及更加带有情感的提示。

Sarah Drasner 展示了下面这个 demo,这个 demo 结合了时间和交互相关的状态改变:

See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验