CSS3变换和过渡让开发者可以轻松实现过渡和过渡动画效果，但这并不意味着任何人都可以做出流畅清晰的动画效果。在这篇文章中，我尝试在背景框中添加一些锦上添花的动画效果，分享一下我的设计思路。本文观点均为作者主观意见，如有不同意见欢迎友好讨论。准备工作首先，动效属于设计活动。对于发展，他们其实并不擅长，包括我。那我们该怎么办呢？一是请教设计大师，但这种机会比较难得。我的方法是参考一些大厂发布的设计规范，这次参考了几年前的MaterialDesign。然后参考同类产品，看看他们哪里添加了动效，从用户的角度感受动效是否合理，是否会损害用户的操作体验。最后，关于动画执行时间，简单看了下MaterialDesign，大致了解到移动端的长动画大概300ms到400ms，短动画大概150ms到200ms，桌面动画大概150ms到200ms，可以看到所有动画的执行时间都不会超过400ms，大部分设置都会控制在300ms以内，因为太长的动画会让人觉得乏味，相反太短的动画也会让人觉得吃力了解。所以我最终确定的总体思路是尽量避免页面上元素的突然出现或者突然消失。对于改变尺寸等操作，必须使用动画进行过渡。动画执行时间控制在150ms到300ms之间，因为一些使用200ms的大面积动画会显得太短，甚至看不出动画效果。接下来就是依次改造了。吸顶层这是一个很常见的场景。模块固定在顶部通过位置：固定；不会随着页面滚动而移动，因为固定在内容区域上方，所以使用box-shadow模拟浮动效果，再配合js动态计算页面scrollTop的距离，从而动态增加阴影效果。部分代码：.breadcrumb-container{transition:box-shadow0.2s;box-shadow:010px10px-10px#ccc;}BreadcrumbnavigationBreadcrumbnavigation用于显示当前页面的层级，所以当路由切换时，breadcrumbs会相应变化。这里我没有使用淡入淡出的效果，而是从右侧做了一个位移效果，同时结合文字的倾斜度，传达给用户“进入页面”的意思.你会发现这里其实并没有移出动画，只有进入的效果。因为用户在操作时视线是跟着鼠标移动的，而面包屑导航的变化一般是在点击侧边栏导航切换路线的时候。用户不会注意到面包屑导航，它本身就是一个短动画，需要控制执行时间。一进一出好像有点拖沓，所以去掉了搬出的动画。当然，最终的效果还是可以接受的。部分代码：.breadcrumb-enter-active{transition:all0.2s;}.breadcrumb-enter,.breadcrumb-leave-active{opacity:0;transform:translateX(30px)skewX(-50deg);}TabbarTabbar指的是chrome浏览器的界面。添加和关闭的动画由原来的水平展开形式改为上下形式。可能有人会问，这里怎么会有搬出去的动画？还是上面说的思路。用户操作时，视线跟随鼠标，标签栏上的操作比较频繁，在多个标签页之间切换，所以这个移出动画是必不可少的，而且抬起的形式也避免了标签元素在执行各自动画时的重叠。部分代码：.tab-animate{display:inline-block;transition:transform0.2sease,opacity0.2sease;}.tabbar-enter,.tabbar-leave-to{不透明度:0;转换：translateY(30px);}.tabbar-leave-active{position:absolute;}主题切换需要注意动画执行时间，因为使用了ElementUI中的Menu组件，有自己的transition设置，持续时间为300ms，所以在为了统一，我把导航的动画时长调整为300ms，这样在主题切换的时候，转场效果会更加完整，不然就会出现这样的情况：导航栏折叠效果的难点其实是同上，只需要注意动画的执行时间与ElementUI的Menu组件保持一致即可。内容区内容区也是业务页面，过渡用transform没用，因为考虑到内容区的元素是不可控的，transform会导致position:fixed;定位失败。同时，将
