手记

【九月打卡】第18天 2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节:第7章 他山之石 - Icon 组件 和 Transition 组件

主讲老师:张轩

课程内容:

今天学习的内容包括:

7-3 Icon 组件样式添加
7-4 让图标动起来 - 动画效果第一种实现方法

课程收获:

react 使用动画

@keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}

使用

/* 
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
*/

.run { animation: rotate 1s linear infinite; }

Transform - 2D/3D 转换属性

transform 属性很好理解,就是向元素应用 2D 或 3D 转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜。示例: 扔到桌子上面的图片

需要注意的是,transform 属性是静态属性,一旦写到 style 里面,将会直接显示作用的结果,无任何变化过程。

Transition - 过渡属性

准确的说,transition 是 过渡 属性,是元素从一种样式逐渐改变为另一种的效果。那么什么是动画呢,不就是在过渡过程中的一系列效果集合吗,所以不管从定义、实现,亦或是呈现效果,transition 都称得上是动画。示例: 向宽度、高度和转换添加过渡效果

transition 非常简单易用,但是需要事件触发,并且是一次性的,过渡状态也相对单一。

Animation - 动画属性

animation 是官方专属动画属性,对 transition 功能进行增强扩展,同时还提供了 keyframes 关键字用来定义动画的各个状态。示例: 调皮的小方块

@keyframes 精确的控制动画变化中时间轴上的关键帧属性效果,用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。

另外在 animation 属性里面还有一个非常重要的动画属性就是:animation-fill-mode,这个属性规定对象动画时间之外的状态,指定动画执行前后如何为目标元素应用样式。这个很方便我们控制动画的结尾样式,保证动画的整体连贯。

0人推荐
随时随地看视频
慕课网APP