第一次 TweenLite 旋转没有被渲染

Question

我用TweenLite 构建了一些简单的flipping hexagons on CodePen。如果您单击它们，它们会翻转并显示另一侧。

我目前面临的问题是每次重新加载后第一次翻转都不会呈现（Windows 10，Google Chrome 67）。它显示了另一面，但不执行 TweenLite 翻转“动画”。这只会发生在第一次翻转时，您选择哪个六边形都没有关系。我希望有人可以帮助我！

我也会在这里发布我的代码的精简版，这样您就不必再去 CodePen：

$(document).ready(function() {
  "use strict";
  $(".hexFront").click(function() {
    $(this).hide();
    TweenLite.to($(this), 1, {
      rotationY: 180,
      ease: Power4.easeOut
    });
    $(this)
      .next()
      .show();
    TweenLite.to($(this).next(), 1, {
      rotationY: 0,
      ease: Power4.easeOut
    });
  });
  $(".hexBack").click(function() {
    $(this)
      .prev()
      .show();
    TweenLite.to($(this).prev(), 1, {
      rotationY: 0,
      ease: Power4.easeOut
    });
    $(this).hide();
    TweenLite.to($(this), 1, {
      rotationY: 180,
      ease: Power4.easeOut
    });
  });
});

body {
  background-color: #1c1c1c;
}

#hexGrid {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5.5%;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  width: 25%;
}

.hex::after {
  content: "";
  display: block;
  padding-bottom: 86.602%;
}

.hexFront,
.hexBack {
  perspective: 800;
  transformstyle: preserve-3d;
  rotationy: -180;
  backfacevisibility: hidden;
}

.hexBack {
  display: none;
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexInner {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexInner img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 0.75;
  filter: grayscale(100%);
  transition: 4s;
}

.hexInner img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transition: 0s;
}

.hexInner p {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 2vw;
  margin: 0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
  <li class="hex">
    <div class="hexFront">
      <div class="hexIn">
        <div class="hexInner">
          <img src="http://lorempixel.com/500/500/" alt="#" />
        </div>
      </div>
    </div>
    <div class="hexBack">
      <div class="hexIn">
        <div class="hexInner">
          <p> backside </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

通过在点击前调用 TweenLite 函数为transform 添加默认值以避免该问题：

$(document).ready(function() {
  "use strict";
  /* Added this */
  TweenLite.to($(".hexFront"), 1, { rotationY: 0 });
  TweenLite.to($(".hexBack"), 1, { rotationY: 180});
  /**/
  $(".hexFront").click(function() {
    $(this).hide();
    TweenLite.to($(this), 1, { rotationY: 180, ease: Power4.easeOut });
    $(this)
      .next()
      .show();
    TweenLite.to($(this).next(), 1, { rotationY: 0, ease: Power4.easeOut });
  });
  $(".hexBack").click(function() {
    $(this)
      .prev()
      .show();
    TweenLite.to($(this).prev(), 1, { rotationY: 0, ease: Power4.easeOut });
    $(this).hide();
    TweenLite.to($(this), 1, { rotationY: 180, ease: Power4.easeOut });
  });
});

body{
  background-color: #1c1c1c;
}

#hexGrid {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5.5%;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  width: 25%;
}

.hex::after {
  content: "";
  display: block;
  padding-bottom: 86.602%;
}

.hexFront,
.hexBack {
  perspective: 800;
  transformstyle: preserve-3d;
  rotationy: -180;
  backfacevisibility: hidden;
}

.hexBack {
  display: none;
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexInner {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexInner img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 0.75;
  filter: grayscale(100%);
  transition: 4s;
}

.hexInner img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transition: 0s;
}

.hexInner p {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 2vw;
  margin: 0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
  <li class="hex">
    <div class="hexFront">
      <div class="hexIn">
        <div class="hexInner">
          <img src="https://picsum.photos/500" alt="#" />
        </div>
      </div>
    </div>
    <div class="hexBack">
      <div class="hexIn">
        <div class="hexInner">
          <p> backside </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 2

您的代码在我看来过于复杂。 您可能完全避免使用 TweenLite：

$(document).ready(function() {
  "use strict";
  $(".hexFront, .hexBack").click(function() {
    $(this).css({transform: 'rotateY(180deg)', opacity:0})
    .next().css({transform: 'rotateY(0deg)', opacity:1}).end()
    .prev().css({transform: 'rotateY(0deg)', opacity:1});
  });
});

body{
  background-color: #1c1c1c;
}

#hexGrid {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5.5%;
  overflow: hidden;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  width: 25%;
}

.hex::after {
  content: "";
  display: block;
  padding-bottom: 86.602%;
}

.hexFront,
.hexBack {
  perspective: 800;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  transition:all 1s ease-out;
}

.hexBack {
  opacity:0;
  transform: rotateY(180deg);
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexInner {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}

.hexInner img {
  left: -100%;
  right: -100%;
  width: auto;
  height: 100%;
  margin: 0 auto;
  transform: rotate3d(0, 0, 0, 0deg);
  opacity: 0.75;
  filter: grayscale(100%);
  transition: 4s;
}

.hexInner img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transition: 0s;
}

.hexInner p {
  color: black;
  text-align: center;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 2vw;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
  <li class="hex">
    <div class="hexBack">
      <div class="hexIn">
        <div class="hexInner">
          <p> backside </p>
        </div>
      </div>
    </div>
    <div class="hexFront">
      <div class="hexIn">
        <div class="hexInner">
          <img src="https://picsum.photos/500" alt="#" />
        </div>
      </div>
    </div>
  </li>
</ul>