CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
Gaurav
Gaurav

Reputation: 149

Add transition effect on div using CSS

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 enter image description here

Upvotes: 0

Views: 407

Answers (1)

Johannes
Johannes

Reputation: 67814

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;
}

Upvotes: 1

Related Questions