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

课程名称：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，这个属性规定对象动画时间之外的状态，指定动画执行前后如何为目标元素应用样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。