CSS3 过渡延迟，进出时间不同

Question

我正在尝试在 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

打开菜单：Logo放大，1秒后，菜单下滑，项目淡入。

关闭菜单：项目淡出，然后菜单向上滑动，然后 1 秒后，徽标缩小。

对于我的生活，我无法让它像我期望的那样工作。我想我不太明白类是如何影响 CSS 转换的。

Answer 1

I understand that you want to

1. Logo scales up
2. 1 second later menu slides down
3. items fade in (may be 0.5s or other.It is depend on you)

And then

1. items fade out (may be 0.5s or other.It is depend on you)
2. menu slides up
3. 1 second later menu scales down

If it is correct desires, you can change following css transitions.

.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; 
}

When you click toggle menu-opened will add immediately.So, you should remove transition-delay in .menu-opened .logo and add transition-delay in .menu-opened .menu first.You just need to change this way.

.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; 
}

      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; 
}