Add transition effect on div using CSS

Question

I have following code on HTML:

<div class="container">
   <div class="row document__box">
      <div class="col-2" style="padding-left:10px;">
         <img src="">         
      </div>
      <div class="col-10">
         <span class="document__anchor">Lorem Ipsum this is a title</span>
         
      </div>
      <div id="first" >
         <span @click="activate(i)" class="document__open_doc">
            <b-icon icon="chevron-double-left" variant="white"></b-icon>
         </span>
         <div id="" v-bind:class="{ active : active_el === i }" class="document__closed_div">
            <span @click="activate(i)" class="document__close_doc">
               <b-icon icon="chevron-double-right" variant="white"></b-icon>
            </span>
            <span class="pr-2 pl-2 document__action_icon">
               Lorem Ipsum this is a excerpt
            </span>          

         </div>
      </div>
   </div>
</div>

On the click of first activate() of a class document__open_doc, div with the class document__closed_div should slide to the left and on the click of second activate(), document__closed_div should slide to the right.

I have written following css:

.document__closed_div.active,
.document__closed_div{
  transition: 1s;
}
.document__closed_div.active{
  transform: translate(0%, 0);
}
.document__closed_div{
  transform: translate(-100%, 0);
}

but it is not working. I am doing it correctly?

The image is for reference

Johannes · Accepted Answer · 2021-06-11 12:38:52Z

1

The transition property should only be applied to the default state, and it should include either which parameter you want to transition (in your case transform) or instead the word "all", so in your case that CSS rule would be

.document__closed_div {
  transition: all 1s;
}

answered Jun 11, 2021 at 12:38

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Over a year ago

Can you please write the whole css rule I have written in my question? Because I update my .document__closed_div css with yours, I am still not getting the result.

Collectives™ on Stack Overflow

Add transition effect on div using CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related