javascript - 使用 transform rotate 停止移动内容时

Question

我正在使用 transform: rotate(); 将内容旋转进出 View ，但是，每个文本主体在进入 View 时处于不同的位置。因此，当您在我的演示中单击下一步按钮时，如果您查看边框，内容位于不同的位置。

当单击下一个按钮时，滚轮同样旋转 90 度，因此我希望内容在每次旋转时都处于相同的位置。有人可以解释/解决为什么这不会发生吗？

我为我的内容创建了一个轮子，并设置了轮子的样式以隐藏当前不可见的选项；

// Page load transform start, setters
var degree = 0;
var itemStart = $('.wheel').find('.item-one').addClass('item-active');
var itemNext = $('.wheel').find('.item-four').addClass('item-prev');

// On click
$('.next').click(function() {
  var wheel = $('.wheel');

  // Increment rotation
  degree += 90;
  wheel.css({
    WebkitTransform: 'rotate(' + degree + 'deg)'
  });

  // Update setter
  itemStart = $('.wheel').find('.item-active');
  itemNext = $('.wheel').find('.item-prev');

  // Add Animation
  $(itemStart).addClass('fadeOut');
  $(itemNext).addClass('fadeIn');

  //If were at the end
  var getStartPrev = $(itemStart).prev();
  var getNextPrev = $(itemNext).prev();

  if (getStartPrev.length == 0) {
    $(itemStart).removeClass('item-active');
    $(itemNext).prev().addClass('item-prev');
    $('.item-four').addClass('item-active').removeClass('item-prev');
  } else {
    $(itemStart).removeClass('item-active');
    $(itemNext).removeClass('item-prev').addClass('item-active');
    $(itemNext).prev().addClass('item-prev');
  }

  if (getNextPrev.length == 0) {
    $('.item-four').addClass('item-prev');
  }

  // Remove Animation
  setTimeout(function() {
    $('.wheel').find('.item').removeClass('fadeIn fadeOut');
  }, 400);
});

.wheel-wrp {
  position: relative;
  height: 700px;
  width: 700px;
}

.wheel {
  height: 700px;
  width: 700px;
  transition: 0.75s;
  border-radius: 50%;
  position: relative;
  background: #fff;
  left: -350px;
}

.item {
  width: 250px;
  position: absolute;
  opacity: 0;
}

.item-active {
  opacity: 1;
}

.item-one {
  bottom: 300px;
  left: 450px;
}

.item-two {
  bottom: 20px;
  left: 230px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

.item-three {
  bottom: 320px;
  left: 0px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.item-four {
  top: 20px;
  left: 230px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  transform: rotate(270deg);
}

.current-item {
  bottom: 300px;
  left: 450px;
}

.next-item {
  top: 20px;
  left: 230px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(-90deg);
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div class="wheel-wrp">
    <div class="wheel">
      <div class="item item-one">
        <h4>Project 1 - beautifully crafted digital brand</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-two">
        <h4>Project 2 - redefining technological boundaries</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-three">
        <h4>Project 3 - Beauty in Design</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item item-four">
        <h4>Project 4 - simply stunning </h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
    </div>
  </div>
</div>
<div class="next">Next</div>

示例演示 - https://codepen.io/SamXronn/pen/opqWbq

Answer 1

这是我的做法。

• 我已将元素的变换原点设置为左上角(用于定位的相同点)

• 使用转换 translateY 和 translateX，然后可以将每个元素放在轮子上，无论它们的宽度和高度如何

• 您不需要 jQuery 来制作动画。只需使用它来切换事件类。使用 CSS3 动画和“事件”类可以更流畅地实现相同的结果，并且使用更少的代码。

Codepen here

let currentItem = 0
const $wheel = $('.wheel'),
      $items = $wheel.find(".item")

$('.next').click(() => rotate(1));
$('.prev').click(() => rotate(-1));

const rotate = direction => {
    currentItem -= direction
    $wheel.css("transform",`rotate(${-currentItem*90}deg)`)
    $items.removeClass("active")
          .eq(currentItem%$items.length)
          .addClass("active")

}

body {
  background-color: #2c3e50;
}
button {
  background: #2980b9;
  padding: 15px 35px;
  color: #fff;
  float: left;
  position: relative;
  z-index: 9999;
  cursor: pointer;
}
.wheel {
  height: 700px;
  width: 700px;
  transition: transform 0.75s;
  border-radius: 50%;
  position: relative;
  background: #fff;
}
.item {
  width: 250px;
  position: absolute;
  opacity: 0.2;
  transition: opacity 0.75s;
  border: 1px solid #f00;
  transform-origin: top left;
}
.item:nth-child(1) {
  top: 50%;
  left: 100%;
  transform: translateY(-50%) translateX(-100%);
}
.item:nth-child(2) {
  top: 100%;
  left: 50%;
  transform: rotate(90deg) translateY(-50%) translateX(-100%);
}
.item:nth-child(3) {
  left: 0;
  top: 50%;
  transform: rotate(180deg) translateY(-50%) translateX(-100%);
}
.item:nth-child(4) {
  top: 0;
  left: 50%;
  transform: rotate(270deg) translateY(-50%) translateX(-100%);
}
.item.active {
  opacity: 1;
}
h4 {
  margin: 0px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="page">
    <div class="wheel">
      <div class="item active">
        <h4>Project 1 - beautifully crafted digital brand</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
      <div class="item">
        <h4>Project 2 - redefining technological boundaries</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div> 
      <div class="item">
        <h4>Project 3 - Beauty in Design</h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div> 
      <div class="item">
        <h4>Project 4 - simply stunning </h4>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
      </div>
    </div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>