Vue. js Элементы не перемещаются при использовании <transition>анимации с рекурсивным компонентом - PullRequest
Новая
       12

Vue. js Элементы не перемещаются при использовании <transition>анимации с рекурсивным компонентом

0 голосов
/ 22 января 2020

Я создаю древовидное меню, для этого я использую функцию рекурсивного компонента, однако при добавлении анимации подуровни в конечном итоге не перемещаются при расширении дерева и остаются позади

I начать все в порядке

Первый уровень в порядке

Проблема возникает со второго уровня

Шаблон. Мой рекурсивный компонент - AsideOptions 

<template>
  <div id="aside-options">
    <div v-for="item in itens" :key="item.CODIGO">
      <div
        class="menu-option"
        @click="action(item.GRUPO === true ? setToggle : displayOption, item.CODIGO)"
        :style="{color: depthStyle[item.NIVEL].font, backgroundColor: depthStyle[item.NIVEL].background}"
      >
        <i :style="{margin: `${subMargin * item.NIVEL}px`}" class="material-icons">{{item.ICON}}</i>
        <p>{{item.DESCRICAO}}</p>
        <Toggle
          v-if="item.GRUPO === true"
          :color="depthStyle[item.NIVEL].font"
          class="toggle-item"
          :ref="`toggle${item.CODIGO}`"
          @toggle="statusToggle($event, item.CODIGO)"
        />
      </div>
      <transition
        :css="false"
        mode="in-out"
        @before-enter="beforeEnter(arguments, item.CODIGO)"
        @enter="enter(arguments, item.CODIGO, item.children.length)"
        @before-leave="beforeLeave(arguments, item.CODIGO, item.children.length)"
        @leave="leave(arguments, item.CODIGO, item.children.length)"
      >
        <AsideOptions
          :key="item.CODIGO"
          v-if="toggleStatus[item.CODIGO] === true"
          :itens="item.children"
          :depthStyle="depthStyle"
          @updateScreen="update"
        />
      </transition>
    </div>
  </div>
</template>

мои методы 

update() {
      this.$forceUpdate();
    },

    emitUpdate() {
      this.$emit("updateScreen");
    },

    // Animation Methods
    animation(el, done, id, size, control) {
      let counter = 1;
      const expand = setInterval(() => {
        const increment =
          this.optionSize[id] + (control ? counter * 5 : -counter * 5);
        el.style.height = `${increment}px`;
        counter++;
        if (counter > (size * 50) / 5) {
          clearInterval(expand);
          done();
        }
      }, 5);
    },

    beforeEnter(args, id) {
      this.contentSize[id] = 0;
      args[0].style.height = `${this.optionSize[id]}px`;
      console.log(`anim enter on ${id}`);
    },

    enter(args, id, size) {
      this.animation(args[0], args[1], id, size, true);
      this.emitUpdate();
    },

    beforeLeave(args, id, size) {
      (this.contentSize[id] = size * 50),
        (args[0].style.height = `${this.optionSize[id]}px`);
    },

    leave(args, id, size) {
      this.animation(args[0], args[1], id, size, true);
      this.emitUpdate();
    },

    // Animation Methods

    action(action, id) {
      action(id);
    },

    setToggle(id) {
      this.$refs[`toggle${id}`][0].setToggle();
    },

    displayOption(id) {
      console.log(`display: ${id}`);
    },

    statusToggle(status, id) {
      this.toggleStatus[id] = status;
      console.log(this.toggleStatus);
      console.log(id);
    }

Я считаю, что проблема возникает из-за recursion (), я пытался использовать это. $ Forceupdate, но у меня ничего не получилось.

Я также пытался добавить тег позиции в стиле, но у меня тоже не получилось.

Кто-нибудь сталкивался с этой проблемой?

...