3

私はいくつかのCSSトランジションをテストしていました（私はCSSの初心者です）。すべての移行はスムーズに進んでいます。しかし、トランジションの 1 つで、マウスオーバーが完了するとトランジションがスムーズに再生され、マウス アウトを行うとすぐに突然終了します。他のすべてのケースでは、mouseover と mouseout の両方が正常に再生されます。

移行がこのように終了する理由は何ですか? 修正方法は？(修正済み: @Edwin に感謝)。それでは、変更なしで機能しない理由を説明してください。

jsbin: http://jsbin.com/oposof 、http://jsbin.com/oposof/5 (最初のトランジション「トライアングル」が気になります)。

  #container1 >  div.triangle {
     border-bottom: 80px solid red;
     border-left: 60px solid transparent; 
     border-right: 60px solid transparent;
      width: 0px;
      height: 0px;

    -webkit-transition: all 1.2s ease-in-out;

  }

  #container1 >  div.triangle:hover {
    border-top: 80px solid green;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
  }


  #container1 >  div.triangle:active {
    border-left: 80px solid blue; 
    border-right: 60px solid transparent;

  }



  #container2 > div.testt {
    color: red;
    -webkit-transition: all 1s ease-in-out;
  }

  #container2 > div.testt:hover {
    color:yellow;
  }

  #container3 >  div.circle {
    border-radius: 70px;
    width: 100px;
    height: 100px;
    background: red;
    -webkit-border-radius: 50px;

    -webkit-transition: all 1.2s ease-in-out;

  }

  #container3 >  div.circle:hover {
    -webkit-border-radius: 20px;
    -webkit-transform: rotate(-45deg);
  }

を使用-webkit-したので、上記のデモは chrome と safari でのみ動作します。追加-moz-これで、Mozilla でもテストできます (できれば IE でもテストできます)。 http://jsbin.com/oposof/5

4

1 に答える 1

4

デフォルトでは上に境界線がなく、ホバーすると突然上に境界線が表示されるという事実が突然のようです。したがって、マウスアウトでは、トランジションの代わりに、トランジション用に参照する初期値がなかったため、上部の境界線を非表示にしています。

これを試して：

#container1 >  div.triangle {
    border-bottom: 80px solid red;
    border-top: 0 solid green;
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent;
    width: 0px;
    height: 0px;

   -webkit-transition: all 1.2s ease-in-out;
}
于 2012-05-22T06:24:22.317 に答える