悬停时使用height：auto进行平滑CSS转换

Question

我希望使用CSS转换在悬停时翻转卡片。

我找到了以下工作：

body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
  color: #000;
  padding: 20px;
}

h3 {
  font-size: 16px;
}

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
  width: 50%;
  padding-top: 20px;
  background: green;
}

.flip-container,
.front,
.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* hide back of pane during swap */

.front,
.back {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.back {
  background: #343434;
  color: #fff;
}


/* flip speed goes here */

.flipper {
  transition: 0.4s;
  transform-style: preserve-3d;
  max-height: 999px;
  position: relative;
}


/*  front pane, placed above back */

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


/* back, initially hidden pane */

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


/* flip the pane when hovered */

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

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

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <!-- front content -->

      <h3>Until 4 Oct 2015</h3>
      <h2>Tyrannosaurus - Meet the Family</h2>
    </div>
  </div>
  <div class="back">
    <!-- back content -->

    <h3>In short</h3>
    <p>Tyrannosaurus - Meet the Family explores how these terrifying dinosaurs became the world's top predators with their massive skulls, powerful jaws, and bone-crunching teeth.</p>
    <a class="button" href="#">Find out more</a>
  </div>
  
</div>

但是，当悬停在卡片上时，动画会断断续续 - 我认为是因为.card-container父元素不适应子div的完整高度。

将卡的高度设置为：auto也很重要，因为根据内部文本的长度，同一页面上会有不同高度的卡片。

谢谢你的帮助。

https://codepen.io/anon/pen/ZvbjEQ

Answer 1

问题在于你使用front和back的绝对位置，这使得父元素的高度为0.相反，你可以简单地只生成一个元素abosulte位置并保持另一个相对。

您可以像这样简化代码：

body {
  background: #f2f2f2;
  font-family: Arial, sans-serif;
  color: #000;
  padding: 20px;
}

h3 {
  font-size: 16px;
}

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
  width: 50%;
  padding-top: 20px;
  
}

.flip-container,
.front,
.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* hide back of pane during swap */

.front,
.back {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
}

.back {
  background: #343434;
  color: #fff;
}


/* flip speed goes here */

/*  front pane, placed above back */

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


/* back, initially hidden pane */

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


/* flip the pane when hovered */

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

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

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="front">
      <!-- front content -->

      <h3>Until 4 Oct 2015</h3>
      <h2>Tyrannosaurus - Meet the Family</h2>
    </div>
  <div class="back">
    <!-- back content -->

    <h3>In short</h3>
    <p>Tyrannosaurus - Meet the Family explores how these terrifying dinosaurs became the world's top predators with their massive skulls, powerful jaws, and bone-crunching teeth.</p>
    <a class="button" href="#">Find out more</a>
  </div>
  
</div>