javascript-第一次TweenLite旋转无法呈现

我用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>

解决方法:

通过单击之前调用TweenLite函数来添加默认值以进行转换,以避免出现此问题：

$(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>

标签：tweenlite,css,javascript,jquery
来源： https://codeday.me/bug/20191108/2010248.html