transition-group 使用

本篇主要是记录transition-group的使用心得。

官方文档：https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1

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;
    }

export default {
    data () {
        return {
            show: false,
            list: [
                { code: 0, text: "第一个" },
                { code: 1, text: "第二个" },
                { code: 2, text: "第三个" },
                { code: 3, text: "第四个" },
                { code: 4, text: "第五个" },
                { code: 5, text: "第六个" }
            ]

        }
    },
    mounted () {
        this.show = true;
    }
}

二.接口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>

export default {
    data () {
        return {
            show: false,
            list: [
                { code: 0, text: "第一个" },
                { code: 1, text: "第二个" },
                { code: 2, text: "第三个" },
                { code: 3, text: "第四个" },
                { code: 4, text: "第五个" },
                { code: 5, text: "第六个" }
            ]

        }
    },
    mounted () {
        this.show = true;
    },
    methods: {
        beforeEnter (dom) {
            dom.classList.add('fade-list-enter-active');
        },
        enter (dom, done) {
            let delay = dom.dataset.delay;
            setTimeout(() => {
                dom.classList.remove('fade-list-enter-active');
                dom.classList.add('fade-list-enter-to');
                let transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
                dom.addEventListener(transitionend, function onEnd () {
                    dom.removeEventListener(transitionend, onEnd);
                    done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子
                })

            }, delay);
        },
        afterEnter (dom) {
            dom.classList.remove('fade-list-enter-to');
        }

    }

}

.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%);
    }
   
    .fade-list-enter-to {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.3s; //transition要写在此处
    }

参考资料： https://juejin.im/post/5cccf5b0e51d453a907b4af1