使用 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>

单击类 activate() 的第一个 document__open_doc 时，类 document__closed_div 的 div 应向左滑动，单击第二个 activate() 时，{{ 1}} 应该向右滑动。

我写了以下css：

document__closed_div

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

图片仅供参考

Answer 1

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

.document__closed_div {
  transition: all 1s;
}