在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 關(guān)于css transition的問題

關(guān)于css transition的問題

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結(jié)構(gòu)如下。

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

這段代碼 為什么 鼠標(biāo)移入的時(shí)候有動(dòng)畫 移除沒動(dòng)畫了。 要是把 transition 的第一個(gè)屬性改成 all才行 但是我不想改成 all 怎么辦?

回答
編輯回答
小曖昧

謝邀!你的HTML結(jié)構(gòu)呢?
發(fā)現(xiàn)問題了,因?yàn)槟愕膶捀咦兂?了,而寬高沒有加transition所以沒有效果
簡(jiǎn)化你的樣式表后如下

2018年2月3日 23:18