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

您的代码有效（working DEMO）。

但是你必须在活动上致电$(".firstimg").toggleClass("turnedimg");。

例如，您可以使用$( document ).ready();或$( selector ).click();。

Here你可以找到所有的JQuery事件。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您的代码看起来不错，您确定将toggleClass放在$(document).ready()内吗？

试试这个：

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

Answer 3

您的图片必须具有＆＃39; left＆＃39;

的初始值

User.first.active_posts

CSS转换不适用于图像

3 个答案: