Vue中基于class和style的过渡和动画

可以通过添加一个条件class来激活动画,style也是类似,本质上v-bind动态绑定

为了更好的性能,一方面我们可以使用不触发重绘的属性,如TransformOpacity;另外一方面可以对动画进行硬件加速,如通过perspectivebackface-visibilitytransform:translateZ(x)等来触发硬件加速

为了方便我将相关内容简记如下图:

2基于class和style的过渡和动画.png

更多相关原图和原始文件已上传GitHub,一来方便批量下载相关脑图,二来可以方便你按照自己的的思路进行修改!

GitHub地址:https://github.com/jCodeLife/mind-map

文中如有其他问题,欢迎留言告知~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3动画应用很广,尤其是在H5项目中,炫酷的交互效果可以给产品带来更好的体验,更能吸引用户。然而在应用的时候,...
    UIleader阅读 2,242评论 0 7
  • 作者:blue(又名一书and一世界) 我的github**用途: **当作字典来查 some websites ...
    一书and一世界阅读 1,211评论 2 19
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,895评论 0 4
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    安石0阅读 1,921评论 0 5
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 6,553评论 0 12