vue enter transition не работает должным образом - PullRequest
Новая
       6

vue enter transition не работает должным образом

0 голосов
/ 18 января 2019

Я работаю над проектом, в котором мне нужно визуализировать некоторые компоненты с анимацией входа и выхода, когда компонент выходит на экран, он должен входить снизу, а когда он уходит, он должен идти вверх.желаемое поведение заключается в том, что когда я изменяю свойство: is тега компонента, текущий компонент идет вверх, а следующий идет снизу, код выглядит следующим образом: 

<template>
  <div class="home">
    <transition name="section">
      <component :is="activeSection"></component>
    </transition>
  </div>
</template>

<script>
import comp1 from './comp1';
import comp2 from './comp2';

export default {
  components: {
    comp1,
    comp2
  },
  data() {
    activeSection: 'comp1'
  }
</script>

<style scoped>
  .section-enter {
    top: 100vh;
  }
  .section-enter-to {
    top: 0vh;
  }
  .section-enter-active {
    animation-name: 'slideIn';
    animation-duration: 1s;
  }
  .section-leave {
    top: 0vh;
  }
  .section-leave-active {
    animation-name: 'slideOut';
    animation-duration: 1s;
  }
  .section-leave-to {
    top: -100vh;
  }


  @keyframes slideIn {
    from {
      top: 100vh;
    }
    to {
      top: 0
    }
  }

  @keyframes slideOut {
    from {
      top: 0vh;
    }
    to {
      top: -100vh;
    }
  }
</style>

, но фактическийПоведение заключается в том, что первый компонент идет вверх, но второй появляется сразу после без анимации.

, если я рендеринг по одному (не разрушая один и не рендерируя другой с тем же действием), все работает отлично.Я не знаю, что происходит.

1 Ответ

0 голосов
/ 20 января 2019

В вашем CSS есть несколько проблем.

Переходы CSS и анимация CSS

Переход может быть реализован с использованием либо Переходов CSS или CSS-анимация .Ваш CSS неправильно смешивает два понятия в этом случае.

В частности, ключевые кадры slideIn и правила .section-enter / .section-enter-to эффективно выполняют одну и ту же задачу по перемещению .section в поле зрения.Однако в нем отсутствует правило transition с ненулевым временем, необходимым для анимации изменения, поэтому изменение происходит немедленно.Та же проблема существует для ключевых кадров slideOut и правил leave. 

.section-enter {
  top: 100vh;
}
.section-enter-to {
  top: 0;
}
.section-enter-active {
  transition: .5s; /* MISSING RULE */
}

.section-leave {
  top: 0;
}
.section-leave-to {
  top: -100vh;
}
.section-leave-active {
  transition: .5s; /* MISSING RULE */
}

Удаление ключевых кадров и добавление отсутствующих правил (как показано выше) приведет к работающему переходу CSS.

demo 1

Использование CSS-анимаций

В качестве альтернативы вы можете использовать ключевые кадры с CSS-анимациями, где анимация применяется только по правилам *-active, иправила *-enter / *-leave не используются. Обратите внимание, что ваш вопрос содержал ненужные кавычки в animation-name: 'slideIn';, который является недопустимым синтаксисом и будет игнорироваться (анимация не происходит).Я использую более простое сокращение в следующем фрагменте (animation: slideIn 1s;). 

.section-enter-active {
  animation: slideIn 1s;
}
.section-leave-active {
  animation: slideOut 1s;
}

@keyframes slideIn {
  from {
    top: 100vh;
  }
  to {
    top: 0;
  }
}
@keyframes slideOut {
  from {
    top: 0;
  }
  to {
    top: -100vh;
  }
}

демо 2

Оптимизация CSS-переходов

Вы также можете настроить анимацию , используя translateY вместо перехода top. 

/* top initially 0 in .wrapper */

.section-leave-active,
.section-enter-active {
  transition: .5s;
}
.section-enter {
  transform: translateY(100%);
}
.section-leave-to {
  transform: translateY(-100%);
}

демо 3

...