jquery - 翻转动画在动画过程中只渲染一半

Question

我正在开发一个 div，一旦您将鼠标悬停在它上面，它就会翻转以显示另一侧的内容。它工作得很好，但我遇到了一个我无法弄清楚的问题。

当翻转动画发生时，翻转期间将显示的内容只显示了一半，我似乎无法弄清楚这是从哪里来的，这让我很困扰。

$(function() {
  var frontHeight = $('.front .inner').height();
  var backHeight = $('.back .inner').height();
  var noImg = false;

  if ($('.front-image')) {
    noImg = true;
    $('.flipper').height(backHeight);
  }

  if (frontHeight > backHeight && !noImg) {
    $('.flipper').height(frontHeight);
  } else {
    $('.flipper').height(backHeight);
  }
})

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
}


/*  UPDATED! flip the pane when hovered */

.flip-container:hover .back {
  transform: rotateY(0deg);
}

.flip-container:hover .front,
.flip-container:hover .front-image {
  transform: rotateY(180deg);
}

.front,
.back {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.front .inner h3,
.back .inner h3 {
  color: white;
}

.front-image,
.front-image .inner {
  height: 100%;
  width: 100%;
}


/* flip speed goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  position: relative;
}


/* hide back of pane during swap */

.front,
.back,
.front-image {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}


/*  UPDATED! front pane, placed above back */

.front,
.front-image {
  z-index: 2;
  transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
  transform: rotateY(-180deg);
}


/*
	Some vertical flip updates
*/

.vertical.flip-container {
  position: relative;
}

.vertical .back {
  transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
  transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
  transform: rotateX(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <div class="inner">
        <h3>
          cool
        </h3>
      </div>
    </div>
    <div class="back">
      <div class="inner">
        <h3>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempor tincidunt massa, et commodo lorem tincidunt auctor. Duis eu nisi bibendum, vehicula elit in, congue ex. Aliquam erat volutpat. Donec ac leo eu ante vulputate efficitur. Vivamus
          lobortis blandit elit, sit amet iaculis neque cursus nec. Etiam convallis erat ac eros blandit, in pharetra urna tristique. Suspendisse sapien dolor, tincidunt id ante vel, venenatis molestie lectus. Ut mattis interdum sapien, ac ornare erat
          maximus et. Fusce vestibulum ultricies eros vel rutrum. Integer et libero sit amet diam tincidunt dapibus eu vitae nunc. Sed ultricies leo quis leo semper, nec maximus leo interdum. Morbi porta tortor eget velit sodales, quis venenatis ante
          blandit.
        </h3>
      </div>
    </div>
  </div>
</div>

Answer 1

由于 .flipper 元素上的背景颜色，您的示例无法正常工作。只需从 .flipper 中删除“background-color”属性并将其分配给 .back 和 .front 元素即可。

.front, .back, .front-image {
    ...
    background-color: #3498db;
}

这是工作 fiddle https://jsfiddle.net/ymuovwnb/1/