0

I have a website where I have set the content to left 100% on normal screen and on click on the button it will show on the screen with left 0%.

I want the transition to be smooth, like the width will increase gradually, not immediately.

I have added transition: transform 1s; on the normal button and on the expand feature, I have used transform: translate(0px, 0px); but still that section is opening immediately.

Please check the page here on mobile only.

Here are the buttons on my question.

Upon clicking on that, a popup is showing. I want that to come from left slowly. I have used the above CSS but that are not working. You can see the CSS on the page:

#tab-description, #tab-additional_information, #tab-video, #tab-fragen, #tab-reviews {
   position: absolute;
   background: #fff;
   right: auto !important;
     left: 100% !important;
   width: 100%;
   overflow: hidden;
   top: 0;
     transition: transform 1s;
}
#tab-description.expand, #tab-additional_information.expand, #tab-video.expand, #tab-fragen.expand, #tab-reviews.expand {
    overflow-y: scroll;
    position: fixed;
      height: 100vh;
    z-index: 9;
      left: 0 !important;
    padding: 20px;
      width: 100%;
      transform: translate(0px, 0px);
}

Any help appreciated.

2 Answers 2

0

To animate a transition with CSS, you need to set transition to the property that is changing. You've set transition: transform 1s;, which will animate any change to the transform property, but the transform property isn't changing between the two states. The property that is changing is left, which changes from 100% to 0. So that's the property you need to transition:

transition: left 1s;
1
  • Hello Jacob, Thanks for your reply. I have added the left property previously and it was not working. I have added that now too. Can you please check that? Feb 20, 2019 at 3:53
0

To achieve a smooth transition from 0% width to 100% width, you should use the transition property with the width property, not with transform.

With this CSS, when the .expand class is added to the element, it will transition from 0% width to 100% width over the duration specified in the transition property.

Make sure to remove !important from the left and width properties in both regular and expanded states to ensure that the transition works as expected

#tab-description, #tab-additional_information, #tab-video, #tab-fragen, #tab-reviews {
    position: absolute;
    background: #fff;
    left: 100%;
    width: 0;
    overflow: hidden;
    top: 0;
    transition: width 1s; /* Apply transition to width property */
}

#tab-description.expand, #tab-additional_information.expand, #tab-video.expand, #tab-fragen.expand, #tab-reviews.expand {
    overflow-y: scroll;
    position: fixed;
    height: 100vh;
    z-index: 9;
    left: 0;
    padding: 20px;
    width: 100%; /* Adjust width to 100% */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.