好处是, transform 制作的动画会直接进入合成阶段,避开重排重绘,可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的,可能很多,也可能很少,如果公告内容的宽度没有超过最大宽度限制,那么就不应该轮播,如果超过了,则发起轮播。
假设我们永远只有一条最新的公告
原理:当一次动画执行结束时,影子内容的头部刚好对准轮播内容的初始位置,那么下次动画开始时,轮播内容将重新回到初始位置,由于影子内容与轮播内容相同,那么就给人造成一种无限轮播的错觉。
逻辑实现:父元素设置了 overflow: hidden ,又想要获取父元素、子元素的真实宽度,那么可以通过 scrollWidth 获取。
兼容性:如果不支持 animate() ,那么我们可以动态创建 <style>+ @keyframes ,插入 <head>, 但也要记得移除。
中级:Css3中的帧动画
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子,首先我们需要安装react-transition-group,输入
组件中引入CSSTransition模块:
一旦动画入场,插件将会自动的在包裹住的标签上添加很多css样式,默认class名是boss-text,所以我们需要给CSSTransition标签加上classNames='boss-text',然后去css文件进行配置:
如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup
在HTML页面中姚运用CSS3动画,需要运用()来定制规则
animation
@keyframes(正确答案)
transition
flash
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)