代码之家 › 专栏 › 技术社区 › leonheess

第一个tweenlite旋转无法渲染

tweenlite css jquery javascript

leonheess · 技术社区 · 6 年前

我建了一些简单的 flipping hexagons on CodePen 具有 TweenLite 是的。如果单击它们,它们会翻转并显示另一面。

我现在面临的问题是 每次重新加载后,第一次翻转都不会渲染 (Windows 10,谷歌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>

2 回复 | 直到 5 年前

Temani Afif BoltClock 6 年前

将默认值添加到 transform 通过在单击之前调用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>

Kosh 6 年前

你的代码对我来说太复杂了。你可能会完全避免使用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>