舞动的灵魂

什么是网格布局

讲到布局，我们就会想到 flex 布局，但 grid 布局更加强大。flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

波纹效果

假设 .waves-ripple 类是实现波纹效果的样式，那么它在初始时是一个大小固定的透明的圆，圆心是鼠标点击的地方。在结束时它的直径是目标元素对角线的长度，而且圆心是目标元素的中心。波纹效果就是通过改变它的透明度、伸缩性、位置再加上过渡来实现的。

Intersection Observer API 提供了一种异步检测目标元素与根元素或 viewport 相交情况变化的方法。检测一个元素是否出现在视口中也是它的一个应用。

下面这些情况都需要用到相交检测：

• 图片懒加载：当图片滚动到可见时才进行加载；

• 内容无限滚动：也就是用户滚动到接近内容底部时直接加载更多；

• 在用户看见某个区域时执行任务或播放动画。

完整 API 见：Intersection Observer API - Web API 接口参考 | MDN。

TS 声明文件

引入/创建声明文件

在使用 TypeScript 写程序的时候，可能会需要使用到 JavaScript 库，因为历史遗留问题，现在非常多的第三方库依然是用 JavaScript 进行编写，但是大多数情况下，库的所有者已经帮你写好了 TypeScript 声明文件，即 .d.ts 文件。

如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验。这往往可以通过触发新进入视口的元素的动画来实现。现在，我们可以通过调用库来更快更方便的实现，wow.js 和 scrollreveal.js 都是不错的选择。

问题描述

在 ios 系统下，若在一个网络请求的回调函数中调用 uni.chooseFile、uni.chooseImage 等 API，那么浏览器将不会弹出文件选择框。

需求场景

我们知道，token 用于保持会话和用户身份认证，它具有时效性。之前的策略是，一旦 token 过期，就强制用户重新登录，如果此时用户正在操作表单，提交时突然被强制登录，那用户体验实在太差了。

正确的策略是，如果该用户是活跃用户的话，当 token 过期时，动态地刷新 token，延长时效。若该用户不是活跃用户，则强制重新登录。

vue-router 动态修改路由的 api 有两个：addRoute 和 removeRoute。

具体用法请见 (API 参考 | Vue Router)。

注意：

（1）通过 addRoute 和 removeRoute 添加或删除路由后，不会改变 getRoutes 的结果。

（2）由于是通过函数动态添加的，那么当 vue 实例重新加载时，这些路由就没有了。因此，刷新页面或者通过 url 访问的时候就会出现白屏。

GSAP（GreenSock Animation Platform）是一个从flash时代一直发展到今天的专业动画库。

GSAP提供4个库文件供用户使用：

• TweenLite

• TimelineLite

• TimelineMax

• TweenMax

TweenMax 是 GSAP 平台中功能最全的动画工具，可用来构建补间动画(tween)。补间是flash时代的专业词汇，意思是在起始状态和终点状态之间补全中间过程。

它是纯 js 动画。

Grow Shadow

1
2
3
4
5
6
7
8
9
10
11
12
13

<h3 class="hover-1">Hover Me</h3>

<style>
.hover-1 {
  background-color: #1095c1;
  color: #ffffff;
  transition: .4s;
}
.hover-1:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .5);
}
</style>