javascript - CSS 中类似 MaterialDesign 的显示过渡

标签 javascript css user-interface

我正在寻找一种简单直观的方式来设计 CSS/JS View 转换,如 Goolges MD 指南中的示例所示:https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm

是否有任何网络框架或库可以帮助开发具有这些转换的布局?

最佳答案

有几件事你可以做,或多或少的成就:

  1. 使用固定宽度/高度和边框半径为 50% 的 div 在背景中产生波纹。然后使用 transform:scale() 动画转换

  2. 使用圆形剪辑路径 https://css-tricks.com/almanac/properties/c/clip/

  3. 使用 Google 提供的 Polymer https://www.polymer-project.org/1.0/

您还可以使用 velocity.js 实现动画完成事件。 http://julian.com/research/velocity/

关于javascript - CSS 中类似 MaterialDesign 的显示过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32184168/

相关文章:

javascript - Angular 2 : pagination of a component with table

javascript - Firebase:事务读取和更新多个文档

javascript - 人造视频播放器的 Canvas 与图像

Chrome 中的 CSS ms-grid 等价物

jquery - 将类添加到 jqgrid 中的 groupHeader

css - 使用动态相对定位在父容器中将一个 DIV 向左浮动,另一个向右浮动

user-interface - 验证 Selenium 中的排序

java - 可以将 JAXX 与 Eclipse 一起使用吗?

Python Tkinter - 在运行时更新

javascript - 防止输入设备提交 angularjs 表单