【九月打卡】第21天 2022升级 React18+TS高仿AntD从零到一打造组件库-原创手记-慕课网

课程名称：2022升级 React18+TS高仿AntD从零到一打造组件库

课程章节：第7章他山之石 - Icon 组件和 Transition 组件

主讲老师：张轩

课程内容：

今天学习的内容包括：

7-8 拿来主义 - 自定义 Transition 组件编码第一部分
7-9 拿来主义 - 自定义 Transition 组件编码第二部分

课程收获：

图片描述

transition-group用于列表的过渡效果。

默认为span, 可以使用tag 转换为其他元素。
子元素通常使用v-for进行循环。
子元素必须要有唯一的key属性，且key不能为索引值。
css过渡是应用在子元素中，而不是这个容器本身。
对应的js事件钩子：before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled

一. 结合css做列表的过渡效果。

通过设置各个子元素不同的 transition-delay的值，来实现子元素依次出现的效果。

缺点: css代码多，如果子元素个数不固定的话，兼容实现很复杂。

对应代码： https://codepen.io/summerhll/pen/KKwNPMj

整行过渡： https://codepen.io/summerhll/pen/JjobMwd


  <!--
    如果需要过滤的元素是通过v-for循环渲染出来,不能使用transition包裹,需要使用transition-group
    如果要为v-for循环创建元素设置动画，必须为每一个元素设置：key属性
  -->
<transition-group class="content" tag="ul" name="fade-list">
    <li v-for="item in list" :key="item.code" v-show="show">
        {{item.text}}
    </li>
</transition-group>

.content {
      li {
            width: 100%;
            margin-bottom: 20px;
            border: 1px solid black;
            height: 48px;
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .fade-list-enter-active {
        opacity: 0;
        transform: translateY(100%);
        transition: all 0.3s;
    }
    .fade-list-enter-to {
        opacity: 1;
        transform: translateY(0);
    }
    .fade-list-enter-active:nth-child(1) {
        transition-delay: 0s;
    }
    .fade-list-enter-active:nth-child(2) {
        transition-delay: 0.15s;
    }
    .fade-list-enter-active:nth-child(3) {
        transition-delay: 0.3s;
    }
    .fade-list-enter-active:nth-child(4) {
        transition-delay: 0.45s;
    }
    .fade-list-enter-active:nth-child(5) {
        transition-delay: 0.6s;
    }
    .fade-list-enter-active:nth-child(6) {
        transition-delay: 0.75s;
    }

二.接口js做的列表过渡效果

监听对应的js钩子，作出子元素依次出现的效果。

需要在v-for循环处设置子元素data-delay的值各部相同。

对应代码：https://codepen.io/summerhll/pen/LYEbPjj

容器切换、混合使用：https://codepen.io/summerhll/pen/abzBEPb

 <!-- 这里加上 v-bind:css="false" 让vue跳过对css的检测，让我们更好控制 动画完成的时机。
如果不加，会影响动画效果 -->
<transition-group class="content" tag="ul" name="fade-list"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
 <li v-for="(item, index) in list" :key="item.code"
     v-show="show"
     :data-delay="index * 150">
     {{item.text}}</li>
</transition-group>