CSS3 transition delay, different timing for in and out

user_503546 0
Viewed 380

I'm trying to build a menu open and close transition in Vue, but added a class on a button click.

See:

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

Opening menu: Logo scales up, then 1 second later, the menu slides down, then items fade in.

Closing menu: Items fade out, then menu slides up, then 1 second later, logo scales down.

For the life of me I can't get it to work as I'd expect. I think I don't really understand how classes effect CSS transitions.

vue.js toggle css-transitions css
3 Answers

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.

      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>

user_38186640
user_13144020

Here you 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; 
}
user_128648490
Related