Vue2：使用Anime.js

Question

目标

我想错开.modal-slot孩子的进入。

问题

我无法单独动画每个子节点，但动画.modal-slot可以正常工作。

上下文

<template>
<transition
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    @after-leave="afterLeave">

    <div class="modal-content">
        <div v-if="title" class="modal-title">{{ title }}</div>
        <div class="modal-slot">
            <slot></slot>
        </div>
    </div>

</transition>
</template>

<script>
import _ from 'lodash';
import anime from 'animejs';

export default {
    name: 'modal',

    data () {
        return {
            delay: 50,
            duration: 400,
            easing: 'easeInOutBack',
            modalBackground: null,
            modalTitle: null,
            modalSlotElements: null,
            modalClose: null
        };
    },

    methods: {
        beforeEnter (element) {
            // Correctly logs selected '.modal-slot' children
            console.log('modalSlotElements', this.$data.modalSlotElements);

            _.forEach(this.$data.modalSlotElements, element => {
                element.style.opacity = 0;
                element.style.transform = 'translateY(10px)';
            });
        },

        enter (element, done) {
            anime({
                targets: this.$data.modalSlotElements,
                duration: this.$data.duration,
                easing: this.$data.easing,
                delay: (target, index) => this.$data.delay * (index + 1),
                translateY: 0,
                opacity: 1,
                complete: () => { done(); }
            });
        }
    },

    mounted () {
        // I can select '.modal-slot' and the animation works as intended. Looking for its children breaks the animation.
        this.$data.modalSlotElements = document.querySelectorAll('.modal-slot > .action-card');
    }
};
</script>

Answer 1

这是一个范围问题。我的解决方案是将动画应用于定义它们的组件中的那些元素，不它们被插入的组件。