Задержка перехода CSS3, различное время входа и выхода - PullRequest
Новая
       10

Задержка перехода CSS3, различное время входа и выхода

3 голосов
/ 06 марта 2020

Я пытаюсь создать переход по открытию и закрытию меню в Vue, но добавил класс по нажатию кнопки.

См .: 

button {
  position: absolute;
  top: 50px;
  right: 0;  
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;

  transition: transform 1s;
  transition-delay: 0s;
}
.menu {
  position: absolute;
  top: 0;
  left: 150px;  

  transform: translateY(-100%);
  transition: transform 1s;
  transition-delay: 1s;
}
li {
  opacity: 0;
  transition: opacity 1s;

  transition-delay: 0.8s;  
}
li.active {
  opacity: 1;
}

/* Opened menu */
.menu-opened .logo {
  transform: scale(2);
  transition-delay: 1s;
}
.menu-opened .menu {
  transform: translateX(0);
  transition-delay: 0s;  
}
.menu-opened li {
  opacity: 1;
}

https://codepen.io/drewbaker/pen/zYGEJQJ

Открытие меню: Lo go масштабируется, затем 1 секунда спустя, меню сдвигается вниз, затем элементы исчезают.

Закрытие меню: элементы исчезают, затем меню сдвигается вверх, затем 1 секунда спустя, lo go уменьшается.

Для жизни я не могу заставить ее работать так, как я ожидал. Думаю, я не совсем понимаю, как классы влияют на CSS переходы.

Ответы [ 3 ]

4 голосов
/ 10 марта 2020

Я понимаю, что вы хотите, чтобы

  1. Lo go увеличивалось
  2. Через 1 секунду меню скользило вниз
  3. элементы исчезали (может быть 0,5 с или другое. Это зависит от вас)

А затем

  1. элементы исчезают (может быть 0,5 с или другое. Это зависит от вас)
  2. меню сдвигается вверх
  3. Через 1 секунду меню сокращается

Если это правильно, вы можете изменить следующие css переходы. 

.logo {
  transition-delay: 1.5s;
}
.menu {
  transition-delay: 0.5s;
}
.menu-opened .logo {
  transition-delay: 0s;
}
.menu-opened .menu {
  transition-delay: 1s;  
}
/* Fade in and out menu items */
.menu li{
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 0s; 
}
.menu-opened .menu li{
  opacity: 1;
  transition: opacity 1s;
  transition-delay: 1.5s; 
}

Когда вы щелкнете по переключателю, открытое меню будет немедленно добавлено. Итак, вы должны удалить задержку перехода в .menu-open .lo go и сначала добавить задержку перехода в .menu-open .menu. Вам просто нужно изменить этот способ . 

      new Vue({
        el: '#container',
        data: {
          menuOpened: false,
        },
        computed: {
          classes() {
            return [
              "main",
              {"menu-opened": this.menuOpened }
            ]
          },
          menuClasses() {
            return [
              "menu"
            ]
          }
        }
      });
button {
  position: absolute;
  top: 50px;
  right: 0;  
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  
  transition: transform 1s;
  transition-delay: 1.5s;
}
.menu {
  position: absolute;
  top: 0;
  left: 150px;  
  
  transform: translateY(-100%);
  transition: transform 1s;
  transition-delay: 0.5s;
}

/* Opened menu */
.menu-opened .logo {
  transform: scale(2);
  transition-delay: 0s;
}
.menu-opened .menu {
  transform: translateX(0);
  transition-delay: 1s;  
}
.menu li{
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 0s; 
}
.menu-opened .menu li{
  opacity: 1;
  transition: opacity 1s;
  transition-delay: 1.5s; 
}
<html>
  <head>
    
  </head>
  <body>
    
    <div id="container">
      <main :class="classes">
        <button @click="menuOpened = !menuOpened">Toggle</button>

        <h1 class="logo">Logo</h1>

        <div :class="menuClasses">
          <ul>
            <li>Menu item here</li>
            <li>Menu item here</li>
            <li class="active">Menu item here</li>
          <ul>          
        </div>

       </main>    
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>   
  </body>
</html>
3 голосов
/ 10 марта 2020

Это может быть достигнуто с помощью transitions в нужном месте.

Я добавил ваши ожидания в следующем коде.

https://codepen.io/ravinila-the-flexboxer/pen/LYVemGj

0 голосов
/ 16 марта 2020

Здесь вы go: 

.logo {
  transition-delay: 1.5s;
}
.menu {
  transition-delay: 0.5s;
}
.menu-opened .logo {
  transition-delay: 0s;
}
.menu-opened .menu {
  transition-delay: 1s;  
}
.menu li{
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 0s; 
}
.menu-opened .menu li{
  opacity: 1;
  transition: opacity 1s;
  transition-delay: 1.5s; 
}
...