关于css transition的问题

Question

div.rightImg{
    width: 80px;
    height: 80px;
    margin-left: 20px;
    float: left;
    position: relative;

    &:hover .bigImg{
      width: 180px;
      height: 180px;
      opacity: 1;
      filter: alpha(opacity = 100);
      transform: translateX(0);
    }

    img{
      width: 100%;
    }

    .bigImg{
      opacity: 0;
      filter: alpha(opacity = 0);
      width: 0px;
      height: 0px;
      position: absolute;
      left: -182px;
      top: 0;
      z-index: 10;
      transition: opacity .25s ease-in, transform .25s ease-in;
      transform: translateX(30px);

      img{
        width: 100%;
      }
    }
 }

HTML结构如下。

<div class="right border">
  <div class="rightImg">
      <img src="./images/QRcode.png" alt="">
      <div class="bigImg">
          <img src="./images/QRcode.png" alt="">
      </div>
  </div>
</div>

这段代码 为什么 鼠标移入的时候有动画 移除没动画了。 要是把 transition 的第一个属性改成 all才行 但是我不想改成 all 怎么办？

Answer 1

谢邀！你的HTML结构呢？
发现问题了，因为你的宽高变成0了，而宽高没有加transition所以没有效果
简化你的样式表后如下