路由动画详解(附加代码效果)

环境准备

使用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.效果演示

旋转翻页效果