Question

我有一个独角鲸游来游去，朝着它的方向翻转。单击它时，它将旋转360度，然后继续游泳。但是旋转之后，它停止向前进方向翻转。我该如何解决？

var $narwhal = $('#narwhalId');
moveNarwhal($narwhal);

function moveNarwhal($narwhal) {
  var myX = Math.floor(Math.random() * ($(window).width() - $narwhal.width()))
  var myY = Math.floor(Math.random() * ($(window).height() - $narwhal.height()))
  if ($narwhal.offset().left < myX) {
    fishFlip($narwhal);
  } else fishFlipBack($narwhal);
  $narwhal.animate({
    top: myY,
    left: myX
  }, 4000, function() {
    moveNarwhal($narwhal);
  }).delay(500);
}

var tmpAnimation = 0;

$($narwhal).click(function() {
  $narwhal.stop(true);
  var element = $narwhal;
  tmpAnimation = tmpAnimation + 360;
  $({
    degrees: tmpAnimation - 360
  }).animate({
    degrees: tmpAnimation
  }, {
    duration: 1000,
    step: function(now) {
      element.css({
        transform: 'rotate(' + now + 'deg)'
      });
    }
  });
  moveNarwhal($narwhal);
});

function fishFlip(IdRef) {
  IdRef.addClass('flipped')
}

function fishFlipBack(IdRef) {
  IdRef.removeClass('flipped')
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#narwhalId {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<img id="narwhalId" src="http://placekitten.com/100/100" />

Answer 1

您需要检查并删除转换，如果该转换存在于元素中。为了确保翻转状态仍然保持，它还建议检查另一个翻转的const { Dragger } = Upload; const props = { name: 'file', multiple: true, action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', //Here is onChange function written and you can use this to perform your action onChange(info) { const { status } = info.file; if (status !== 'uploading') { console.log(info.file, info.fileList); } if (status === 'done') { message.success(`${info.file.name} file uploaded successfully.`); } else if (status === 'error') { message.error(`${info.file.name} file upload failed.`); } }, }; . . . <Dragger {...props}> <p> ... </p> </Dragger>并将其添加到旋转函数中

transform

var $narwhal = $('#narwhalId');
moveNarwhal($narwhal);

function moveNarwhal($narwhal) {
  var myX = Math.floor(Math.random() * ($(window).width() - $narwhal.width()))
  var myY = Math.floor(Math.random() * ($(window).height() - $narwhal.height()))
  if ($narwhal.offset().left < myX) {
    fishFlip($narwhal);
  } else fishFlipBack($narwhal);
  $narwhal.animate({
    top: myY,
    left: myX
  }, 4000, function() {
    moveNarwhal($narwhal);
  }).delay(500);
}

var tmpAnimation = 0;

$($narwhal).click(function() {
  $narwhal.stop(true);
  var element = $narwhal;
  tmpAnimation = tmpAnimation + 360;
  $({
    degrees: tmpAnimation - 360
  }).animate({
    degrees: tmpAnimation
  }, {
    duration: 1000,
    step: function(now) {
      if(element.hasClass('flipped')) {
        element.css({
          transform: 'rotate(' + now + 'deg) scaleX(-1)'
        });
      } else {
        element.css({
          transform: 'rotate(' + now + 'deg)'
        });
      }
    }
  });
  moveNarwhal($narwhal);
});

function fishFlip(IdRef) {
  $narwhal.css('transform','');
  IdRef.addClass('flipped')
}

function fishFlipBack(IdRef) {
  IdRef.removeClass('flipped')
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#narwhalId {position:absolute;}

如何解决JQuery中的旋转图像问题？

1 个答案: