使用 CSS 在 div 上添加过渡效果

Question

我在 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>

点击类document__open_doc的第一个activate()，类document__closed_div的div应该向左滑动，点击第二个activate()，document__closed_div应该向右滑动。

我写了以下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);
}

但它不起作用。我做得对吗？

图片供参考

Answer 1

transition 属性应该只应用于默认状态，并且它应该包含您想要转换的参数（在您的情况下为 transform）或代替单词“all”，因此在您的情况下，CSS规则是

.document__closed_div {
  transition: all 1s;
}