画像にCSSトランジションがありません

Question

div要素の動作トランジションを作成しましたが、画像クラスにまったく同じメソッドを適用しようとすると機能しませんでした。左にスムーズに移動する代わりに、左にジャンプします。回転変換アニメーションは機能しますが、左のトランジションは動作しません。

.firstimg{ 
width: 5%; 
cursor: pointer; 
position: absolute; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
     transition: all 0.4s ease; 
} 

.turnedimg{ 
width: 5%; 
cursor: pointer; 
/*left: 12% !important;*/ 
position: absolute; 

-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
     transform: rotate(90deg); 

    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -ms-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
     transition: all 0.4s ease; 
} 

ローテーションが動作する理由はわかりませんが、移行はありません。アニメーションを動作させるにはどうすればいいですか？興味があれば、私はJQueryを通して呼びかけています。

$(".firstimg").toggleClass("turnedimg"); 

Answer 1

.firstimg{ 
width: 5%; 
left: 0%; 
cursor: pointer; 
... 

Answer 2

あなたのコードは（working DEMO）で動作します。

BUTイベントで$(".firstimg").toggleClass("turnedimg");に電話する必要があります。

たとえば、$(document).ready();または$(selector).click();を使用できます。

HereすべてのJQueryイベントを見つけることができます。

//When page is loaded 
 
$(document).ready(function() { 
 
    $(".firstimg").toggleClass("turnedimg"); 
 
    
 
    
 
    //On click 
 
    $(".firstimg").click(function() { 
 
    $(".firstimg").toggleClass("turnedimg"); 
 
    }); 
 
});

.firstimg { 
 
    width: 5%; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
    -webkit-transition: all 0.4s ease; 
 
    -moz-transition: all 0.4s ease; 
 
    -ms-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.turnedimg { 
 
    width: 5%; 
 
    cursor: pointer; 
 
    /*left: 12% !important;*/ 
 
    position: absolute; 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    -webkit-transition: all 0.4s ease; 
 
    -moz-transition: all 0.4s ease; 
 
    -ms-transition: all 0.4s ease; 
 
    -o-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<img class="firstimg" src="http://www.placehold.it/400/400"> 
 

 
<p> 
 
Try to click the image 
 
</p>

Answer 3

あなたのコードがよさそうだ、あなたは$(document).ready()内toggleClassを入れていることを確信していますか？

はこれを試してみてください。

$(document).ready(function() { 
    $(".firstimg").toggleClass("turnedimg"); 
});