Vue2:使用Anime.js

时间:2018-03-01 20:05:35

标签: javascript vuejs2 anime.js

目标

我想错开.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>

1 个答案:

答案 0 :(得分:0)

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