Question

我找到了一个示例，感谢http://jsfiddle.net/g9dn1a09/，我正在尝试对其进行修改，以使CSS元素在单击到给定坐标时会转换，然后重复。

我遇到的问题是我的代码正在将元素转换为与所需坐标不同的坐标。

我如何做到这一点？

谢谢

JavaScript

var $box = $('.box'),
    $btn = $('.toggle');


$box.on('click', function() {
    var $this = $(this);
    if ($this.hasClass('right')) {
        $this.removeClass('right').addClass('down');
    } 
    else if ($this.hasClass('down')) {
        $this.removeClass('down').addClass('left');
    }
    else if ($this.hasClass('left')) {
        $this.removeClass('left').addClass('up');
    }
    else if ($this.hasClass('up')) {
        $this.removeClass('up').addClass('right');
    }

    else {
        $this.addClass('right');
    }
});

CSS

.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    transition: transform 1s;
}


.right {
    -webkit-transform-origin: 100% 50%;
    transform: translateX(100px);

}
.down {
    -webkit-transform-origin: 100% 50%;
    transform: translatey(100px);

}
.left {
    -webkit-transform-origin: 100% 50%;
    transform: translatex(100px);

}
.up {
    -webkit-transform-origin: 100% 50%;
    transform: translatey(0px);

}

HTML

 <div class="box"></div>

Answer 1

您需要累计翻译，而不必每次都定义一个新的翻译，因为您只需重新考虑初始状态，就不会有任何连续性：

var $box = $('.box'),
  $btn = $('.toggle');


$box.on('click', function() {
  var $this = $(this);
  if ($this.hasClass('right')) {
    $this.removeClass('right').addClass('down');
  } else if ($this.hasClass('down')) {
    $this.removeClass('down').addClass('left');
  } else if ($this.hasClass('left')) {
    $this.removeClass('left').addClass('up');
  } else if ($this.hasClass('up')) {
    $this.removeClass('up').addClass('right');
  } else {
    $this.addClass('right');
  }
});

.box {
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: transform 1s;
}

.right {
  transform: translateX(100px) translateY(0);
}

.down {
  transform: translateX(100px) translateY(100px);
}

.left {
  transform: translateX(0) translateY(100px);
}

.up {
  transform:translateX(0) translateY(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>

CSS过渡到特定位置

1 个答案: