CODEWITHSUNDEEP
css
Buzzinga
Buzzinga

Reputation: 401

How to apply transform and transition effect on a div

I was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :

nav li:hover .menu-sub {
  display: block;
  transform: translateY(-100%);
}

I also modified the code to add a transition effect:

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  display: none;
  color: #fff;
  padding: 2em;
  -webkit-transition: -webkit-transform 1.5s ease;
    -moz-transition: -moz-transform 1.5s ease;
    -o-transition: -o-transform 1.5s ease;
    transition: transform 1.5s ease;
}

The position changed but I don't see any transition effect at all. What am i doing wrong ?

Upvotes: 2

Views: 311

Answers (2)

Thielicious
Thielicious

Reputation: 4452

Use visibility:hidden then visible

display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  visibility: hidden;
  color: #fff;
  padding: 2em;
  transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
  visibility: visible;
  transform: translateY(-100%);
}

Upvotes: 1

Naren Murali
Naren Murali

Reputation: 58777

Please modify the transition to shown below, it was written wrong.

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  opacity:0;
  overflow:hidden;
  box-sizing:border-box;
  height:0px;
  color: #fff;
  -webkit-transition: opacity 1.5s ease-out;
    -moz-transition: opacity 1.5s ease-out;
    -o-transition: opacity 1.5s ease-out;
    transition: opacity 1.5s ease-out;
}

Transition does not work with display, instead use the below effect.

Codepen Demo

Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.

Upvotes: 1

Related Questions