效果Tips (1)

页面首部出现进度条

效果如图：

用nprocess来解决。上代码

yarn add nprogress @types/nprogress -D

然后在你所写的请求的拦截器中设置，我用的umi。

import { RequestConfig } from '@@/plugin-request/request';
import * as NProgress from 'nprogress';
import 'nprogress/nprogress.css'

export const request:RequestConfig = {
  middlewares: [
    async function middlewareA(ctx, next) {
      NProgress.start()
      await next();
      NProgress.done()
    }
  ]
}

之后你的所有请求就都有这么一个进度条了。看着还是蛮炫酷的。

跳动的数字

import TweenOne from "rc-tween-one";
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin'

TweenOne.plugins.push(Children)

<TweenOne
    animation={{
        Children: {
            value: 0,
            floatLength: 0,
            formatMoney: true
        },
        duration: 1000
    }}
/>

会在页面生成一个div,数字会跳动

hamburger button的打开，删除效果

看到一个极其炫酷的特效，先上效果图

列表肯定都会写，难点在于这个动态的变成删，又变成了humburget button,我觉得很炫酷，这里给出代码。

const [isActive, setIsActive] = useState(false);

<div
  className={`${styles.menuToggle} ${isActive ? styles.active : ''}`}
  onClick={() => setIsActive(!isActive)}
>
  <div />
  <span />
  <span />
  <span />
  <div />
</div>

.menuToggle {
  cursor: pointer;
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  span {
    display: block;
    width: 27px;
    height: 4px;
    margin-bottom: 3px;
    position: relative;
    background: #cdcdcd;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }
  span:first-child {
    transform-origin: 0% 0%;
  }
  span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
}

.active {
  span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
  }
  span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }
}