0

Goal

I'd like to stagger the entry of the .modal-slot children.

Problem

I am unable to animate each child node individually, although animating .modal-slot works.

Context

<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>
Donnie
  • 6,229
  • 8
  • 35
  • 53
  • You can use something like `document.querySelector('.modal-slot').querySelectorAll('.action-card');` – Hackerman Mar 01 '18 at 20:09
  • That doesn't appear to work. – Donnie Mar 01 '18 at 20:55
  • Try `document.querySelector('.modal-slot *')`. If it doesnt work, can you post the template that uses that component? (So we get a glimpse of what may be in those slots) – acdcjunior Mar 01 '18 at 21:11
  • It seems to have more to do with the timing rather than the selectors. I think that the nodes I'm trying to select are not yet available at `mounted()`. – Donnie Mar 02 '18 at 15:22

1 Answers1

0

It is a scope issue. My solution is to apply the animations to those elements in the component in which they are defined, not the component into which they are slotted.

Donnie
  • 6,229
  • 8
  • 35
  • 53