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

【问题标题】：CSS3 transition delay, different timing for in and outCSS3 过渡延迟，进出不同时间
【发布时间】：2020-06-18 15:41:53
【问题描述】：

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

【问题讨论】：

我不确定你的问题，你能澄清一下吗？我运行了 codepen，它似乎可以按您的意愿工作。
关闭菜单时过渡的顺序应该倒退。
菜单-向下滑动和项目-淡入应该同时发生吗？
你要达到什么目的，能详细解释一下吗？

标签： css vue.js css-transitions toggle

【解决方案1】：

我知道你想要

徽标放大
1 秒后菜单向下滑动
项目淡入（可能是 0.5 秒或其他时间。这取决于您）

然后

项目淡出（可能是 0.5s 或其他。这取决于你）
菜单向上滑动
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; 
}

当你点击toggle menu-opened时会立即添加。所以你应该先去掉.menu-opened .logo中的transition-delay，然后先在.menu-opened .menu中添加transition-delay。你只需要改变这种方式.

      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>

【讨论】：

【解决方案2】：

可以在正确的地方使用transitions来实现。

我已在以下代码笔中添加了您的期望。

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

【讨论】：

【解决方案3】：

给你：

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

【讨论】：

似乎是从接受的答案复制/粘贴