Первое вращение TweenLite не отображается - PullRequest
Новая
       15

Первое вращение TweenLite не отображается

0 голосов
/ 26 июня 2018

Я строю несколько простых переворачивающих шестиугольников на CodePen с TweenLite .Если вы нажмете на них, они перевернутся и покажут другую сторону.

Проблема, с которой я сталкиваюсь на данный момент, заключается в том, что после каждой перезагрузки самый первый щелчок не отображает (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>

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

Ваш код выглядит слишком сложным для меня.Вы можете вообще не использовать 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>
0 голосов
/ 26 июня 2018

Добавьте значение по умолчанию к 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>
...