翻转动画仅在动画期间渲染一半

时间：2017-09-07 12:24:39

标签： jquery html css animation

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

当翻转动画发生时，只有翻转过程中显示的内容的一半显示出来，我似乎无法弄清楚这是从哪里来的，这让我很烦恼。

＆＃13;
＆＃13; 
$(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);
  }
})
＆＃13; 
/* 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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

由于.flipper元素的背景颜色，您的示例无效。 只需删除＆＃34;背景颜色＆＃34;来自.flipper的属性，并将其分配给.back和.front元素。

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

这里有小提琴 https://jsfiddle.net/ymuovwnb/1/

答案 1 :(得分：0)

像这样更改你的鳍状肢div：

<div class="flipper" style="height: 300px;">

答案 2 :(得分：0)

以下是解决方案，尝试从正在翻转的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 */
body{
    background-color: #3498db;
    }
.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;
  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>

相关问题
最新问题