CODEWITHSUNDEEP
htmlcsscss-transforms
Manoj Dhiman
Manoj Dhiman

Reputation: 5166

issues in css transform rule

SO i am new to css actually i am a developer but i want to do this task with css only according to requirments . I have a div and i want to open a fixed div on click. i have tried some thing and setup on js fiddle here is js fiddle link . I am very near. main css part is 

.portfolio
{
      background: #218592;
    z-index: 0;
    opacity: 0;
  -webkit-transform: translateX(0%);
 -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
  -moz-transform: translateX(0%);
  -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  -ms-transform: translateX(0%);
  height: 100%;
  width: 100%;
    position: fixed;
      top: 0;
  left: 0;
}
.display-work
{
    z-index: 1000;
    opacity: 1;
    -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);

  transform: translateX(-100%);

  -ms-transform: translateX(-100%);

}

full code is available on JS fiddle

Problem

when i click on the div there is two issues

1) the div will not slide on first click (i can see this my self not a prior task)

2) the fixed div is sliding but it disappears immediately

unable to find the reason

Upvotes: 0

Views: 43

Answers (1)

Max Novich
Max Novich

Reputation: 1169

You need to get rid of opacity:0 and switch translateX places.

portfolio{
          background: #218592;
        z-index: 0;
      -webkit-transform: translateX(100%);
     -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s; 
      -moz-transform: translateX(100%);
      -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
      transform: translateX(100%);
      transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
      -ms-transform: translateX(100%);
      height: 100%;
      width: 100%;
        position: fixed;
          top: 0;
      left: 0;
    }
    .display-work
    {
        z-index: 1000;
        -webkit-transform: translateX(0%);
      -moz-transform: translateX(0%);

      transform: translateX(0%);

      -ms-transform: translateX(0%);

    }

Here is the fixed fiddle

Upvotes: 2

Related Questions