环境准备
使用umi脚手架
- 使用umi脚手架创建：
1.首先创建一个空目录 $ yarn create @umijs/umi-app //这里的umi-app不是你创建的项目名称，你创建的项目名称与空目录名称一致
安装依赖
$ yarn
启动项目
$ yarn start
动画属性详解
1.transform(变形–动画的实际效果)
a.C3中支持操作
1.旋转：rotate 2.扭曲：skew 3.缩放：scale 4.移动：translate 5.矩阵变形：matrix
b.使用介绍
rotate(旋转)
1.rotate(xxdeg) //2D旋转 2.rotateX()或rotateY() //3D旋转 旋转都是以中心为基点,deg表示旋转的角度，为负数时表示逆时针旋转
translate(移动)
translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移
scale(缩放)
scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。
skew(扭曲)
skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
c.基点介绍
1.所有的基点默认都在中心位置，我们可以使用transform-origin：(x,y)来改变元素基点
2.x指水平方向取值：left,center,right也可以设置对应的百分比位置
left=100%;center=0%;right=0%
3.y指垂直方向的取值:top,center,botton也可以设置对应的百分比
d.使用transform注意事项
1.目前transform只支持IE10+，对IE9不支持，要兼容浏览器需要添加前缀
transform:translate(10,10) // W3c标准 -webkit-transform:translate(10,10) // Safari Chrome -moz-transform:translate(10,10) // firefox -ms-transform:translate(10,10) // IE9 -o-transform:translate(10,10) // opera
2.transition(设置过渡属性)
transition 属性是一个简写属性，用于设置四个过渡属性：
注意：请始终设置transition-duration，否则时长为0，不会产生过渡效果
a.transition-property 规定设置过渡效果的 CSS 属性的名称。
1.语法：transition-property: none|all|property;默认all
b.transition-duration 规定完成过渡效果需要多少秒或毫秒。
1.语法：transition-duration: time
c.transition-timing-function 规定速度效果的速度曲线。
1.语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
d.transition-delay 定义过渡效果何时开始(毫秒)。
1.语法：transition-delay: time
3.opacity(设置元素透明度)
opacity 用于指定元素透明度, 支持 0~1 之间的小数.
默认值 1-完全不透明, 0-完全透明
4.z-index(设置堆叠顺序)
a.定义
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。
b.注意：
1.当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。
2.当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比。
c.适用范围
z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。
简易动画效果实现(附加代码)
前提配置
实现前提：采用第三方库react-transition-group
1.如果使用react脚手架，需要在App.js中路由站位位置配置
2.如果使用umi脚手架，需要在layouts文件下的index.tsx中进行如下配置
注意事项：1.这里是classNames且classNames后跟的是字符串。2.unmountOnExit代表的是在元素退场时，自动把DOM也删除
动画样式编写格式：例如上方图片中classNames=‘dg’,dg所代表下方样式的xxx
xxx-enter: 进入（入场）前的CSS样式；
xxx-enter-active:进入动画直到完成时之前的CSS样式; xxx-enter-done:进入完成时保留的CSS样式; xxx-exit:退出（出场）前的CSS样式; xxx-exit-active:退出动画知道完成时之前的的CSS样式。 xxx-exit-done:退出完成时保留的CSS样式。
水平翻页功能
1.代码展示
2.效果展示
缩放翻页展示
1.代码展示
2.效果展示
旋转翻页展示
1.代码展示
2.效果演示
