CSS3 转换延迟，进出时间不同

Question

我正在尝试在 Vue 中构建一个菜单打开和关闭过渡，但在单击按钮时添加了一个 class。

参见：

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 秒后，徽标缩小。

我这辈子都无法让它像我期望的那样工作。我想我真的不明白 classes 是如何影响 CSS 转换的。

Answer 1

我知道你想要

徽标放大
1 秒后菜单向下滑动
项目淡入（可能是 0.5 秒或 other.It 取决于您）

然后

项目淡出（可能是 0.5 秒或 other.It 取决于您）
菜单向上滑动
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时会添加immediately.So，你应该删除.menu-opened .logo中的transition-delay并在.menu-opened .menu中添加transition-delay first.You只需要改成这样。

      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>

Answer 2

在合适的地方使用transitions即可。

我已将您的期望添加到以下代码笔中。

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

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

CSS3 转换延迟，进出时间不同

CSS3 transition delay, different timing for in and out

css

toggle

css-transitions

vue.js