内容不简单，只是为了阐明下组件封装的思路。

一个动画

先来看下这个动画

先来剖析下动画，动画中的每一个字母都会有一个独自的跳动。这个跳动的动画是一样的，只是每一个字母的开始工夫不同。能够看进去这个动画外面的动画成果其实是一个。只是不同的元素在指定这个动画的时候，延迟时间有了一个管制。
那么咱们能够把文字的每一个字母都放到一个span标签中。而后对每一个事件标签指定一个动画款式。这里能够利用nth-of-type来实现。

<div class="loading loading-1">  <span>l</span>  <span>o</span>  <span>a</span>  <span>d</span>  <span>i</span>  <span>n</span>  <span>g</span>  <span>.</span>  <span>.</span>  <span>.</span></div>
.loading {  margin: 100px;  height: 100px;  line-height: 100px;}.loading > span {  display: inline-block;  text-transform: uppercase;  letter-spacing: 2px;  animation: loadingWord 800ms ease-in infinite alternate;}/* 10个字母，每一个的提早都不同 */.loading-1 > span:nth-of-type(1){ animation-delay: 200ms; }.loading-1 > span:nth-of-type(2){ animation-delay: 300ms; }.loading-1 > span:nth-of-type(3){ animation-delay: 400ms; }.loading-1 > span:nth-of-type(4){ animation-delay: 500ms; }.loading-1 > span:nth-of-type(5){ animation-delay: 600ms; }.loading-1 > span:nth-of-type(6){ animation-delay: 700ms; }.loading-1 > span:nth-of-type(7){ animation-delay: 800ms; }.loading-1 > span:nth-of-type(8){ animation-delay: 900ms; }.loading-1 > span:nth-of-type(9){ animation-delay: 1000ms; }.loading-1 > span:nth-of-type(10){ animation-delay: 1100ms; }@keyframes loadingWord {  0% {    transform: translateY(0);  }  50% {    transform: translateY(0);  }  100% {    transform: translateY(-16px);  }}

这样子，动画就很快实现了。成果如图：

封装成组件

如果只是实现一个动画性能，那么下面的代码就能够了。如果咱们须要把这个加载动画封装成一个组件，不便后续相似场景的应用，就须要思考更多货色，不能简略的实现这一个成果就行了。
首先，咱们须要剖析这个性能中，可能会呈现变动的局部：

  1. 这个动画，是示意一个期待过程。期待过程可能是加载中，loading；下载中，downloading；上传中，uploading等多种状况。所以这里的文字是须要可配置的。
  2. 文字的款式可能会须要变动。外围是文字大小，色彩。
  3. 动画形式，动画频率。因为这个组件自身就是跳动期待动画，所以动画局部倡议固定。不然组件就太灵便了，应用上会不不便。还不如实现两个组件。

文字局部

像之前的代码，须要在CSS中写死index，对每一个固定地位的子元素设置动画提早。如果文字长度不是固定的，那么这种写法就是有问题的。咱们首先要解决的就是这个问题。
这里能够利用css变量来解决。代码如下

<div class="loading loading-2">  <span style="--index:0">l</span>  <span style="--index:1">o</span>  <span style="--index:2">a</span>  <span style="--index:3">d</span>  <span style="--index:4">i</span>  <span style="--index:5">n</span>  <span style="--index:6">g</span>  <span style="--index:7">.</span>  <span style="--index:8">.</span>  <span style="--index:9">.</span></div>
.loading {  margin: 100px;  height: 100px;  line-height: 100px;}.loading > span {  display: inline-block;  text-transform: uppercase;  letter-spacing: 2px;  animation: loadingWord 800ms ease-in infinite alternate;  animation-delay: calc(var(--index) * 100ms + 200ms);}

这样子，每一个span别离有本人的--index。那么动画提早就会计算出对应--index的工夫。
咱们再把子节点改成JS读取某个文字来生产的。

<div class="loading loading-3" id="load">loading...</div>
const loadingEl = document.getElementById('load');const txts = loadingEl.innerText.split('');let loadingElChild = '';txts.forEach((t, i) => {  loadingElChild += `<span style="--index:${i}">${t}</span>`;});loadingEl.innerHTML = loadingElChild;

这样子，不同文字的跳动期待就实现了。成果如图：

款式局部

因为文字大小，文字色彩，文字居中这几个款式，都是会被子节点继承的。所以内部传入后，间接赋值给父节点就行。这里代码上不须要独自再改了。
代码举例：

<div class="loading loading-3" id="load"  style="font-size:12px;color:red;font-weight:bold;">download...</div>

成果如图：

最初

本文解说了一个组件封装的思路，置信大家看完就晓得怎么去把一个性能封装成一个组件了。具体是Vue组件还是React组件，就靠各位了。我这里就不写了。

完结

好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公众号：写代码的浩，求关注 。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。