CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bagzli
Bagzli

Reputation: 6579

Slide logo and text on menu click

I am trying to make it so that when you click on the menu button, a sliding animation is played on the logo and the text in the header. Both of them are to slide left. Menu slides out of screen and text slides in to screen to replace the logo's position. In addition to that, a menu will drop down on the screen as demonstrated in the js fiddle below.

I've been trying for some time now to make this work but with no luck. I have made a JS Fiddle to show what I have attempted: https://jsfiddle.net/n9tjvrjt/

The JS Fiddle contains a little more code than usual, I'm sorry about that but I felt all of that code there will be crucial in order for me to demonstrate my attempts. I believe the key component is transition, but for some reason it just doesn't want to work. The code I'm referring to is written below

@media only screen and (max-width: 670px) {
  html body .wrapper .header-wrapper .header-row .header-cell.header-profile {
    display: none;
  }
  html body .wrapper .header-wrapper .header-row .header-cell.header-profile.active {
    display: table-cell;
    width: 100%;
    padding-left: 20px;
    -moz-transition: 3s;
    -o-transition: 3s;
    -webkit-transition: 3s;
    transition: 3s;
  }
  html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active {
    position: absolute;
    left: -335px;
    -moz-transition: 3s;
    -o-transition: 3s;
    -webkit-transition: 3s;
    transition: 3s;
  }
}

As you will see in the fiddle, the code behaves exactly how I want it to, except the animation never plays. I'm not sure why, any help is most appreciated.

Also, please ignore the long class names, it is coming from a sass file that was compiled for purpose of demonstrating the problem.

Important note, please resize your screen to be under 670 pixels when testing the fiddle.

Upvotes: 0

Views: 108

Answers (1)

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

You should set the transition for all:

 html body .wrapper .header-wrapper .header-row .header-cell.header-logo.active {
    position: absolute;
    left: -335px;
    -moz-transition: all .3s ease-in;
    -o-transition:all .3s ease-in;
    -webkit-transition:all .3s ease-in;
    transition: all .3s ease-in;
  }

Upvotes: 2

Related Questions