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

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

06.03.2020 01:39:41 Просмотров 13 Источник

Я пытаюсь построить меню открытия и закрытия перехода в 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

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

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

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

У вопроса есть решение - Посмотреть?

Ответы - Задержка перехода CSS3, различное время для входа и выхода / CSS3 transition delay, different timing for in and out

Является ответом!
NayDwe

10.03.2020 08:23:37

Я понимаю, что ты этого хочешь

  1. Логотип масштабируется вверх
  2. 1 секунду меню сползает вниз
  3. элементы исчезают (может быть 0,5 С или other.It это зависит от вас)

И затем

  1. элементы исчезают (может быть 0,5 С или other.It это зависит от вас)
  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; 
}

При нажатии кнопки переключить меню-откроется окно добавления immediately.So, вы должны удалить переход-задержку в .меню-открыто .логотип и добавить переход-задержка в работе .меню-открыто .сначала меню.Вам просто нужно изменить этот путь.

      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>

RaviNila

10.03.2020 09:27:36

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

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

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

boi yeet

16.03.2020 11:44:06

Здесь вы идете:

.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; 
}
Закрыть X