javascript - 悬停效果不适用于变换 : rotateY

Question

您好，我已经更改了 w3schools 的翻转卡元素，并添加了 javascript，如果它们位于视口(viewport)中，并且用户可以理解卡后面有文本，它们将旋转 60px。它在滚动上运行良好，但现在我发现悬停效果不起作用。你能帮助我吗？

https://www.w3schools.com/howto/howto_css_flip_card.asp

https://jsfiddle.net/mqbkzLy2/

var x = 0;
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function() {

  if ($(".flip-card-inner").isInViewport() && x == 0) {
    setTimeout(function() {
      $(".flip-card-inner").css('transform', 'rotateY(80deg)');
    }, 400);
    setTimeout(function() {
      $(".flip-card-inner").css('transform', 'rotateY(0)');
    }, 800);
    x++;
    console.log(x);
    console.log("in");
  }
  if (!$(".flip-card-inner").isInViewport() && x != 0) {
    x = 0;
    console.log('No success.');
    console.log(x);
    console.log("out");

  }
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:120vh;background-color:yellow;"></div>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

Answer 1

that they will rotate 60px if they are in viewport with that user can understand that there is a textt behind card.

不要为此使用滚动事件监听器，请使用 Intersection Observer (IO)为了这。

IO就是为了解决此类问题而设计的。使用 IO，只要 HTML 元素与另一个元素(或与视口(viewport))相交，您就可以使用react

Check this page ，它向您展示了如何在元素进入视口(viewport)后为其设置动画(一直向下滚动)。当然，您可以使用任何您想要的动画，然后由 CSS 处理。这只是一个非常明显的例子。

简短回顾一下要让 IO 工作需要做什么:

首先你必须创建一个新的观察者:

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

这里我们定义，一旦您的目标元素在视口(viewport)中 100% 可见(阈值为 1)，您的回调函数就会被执行。这里你可以定义另一个百​​分比，0.5 意味着当你的元素有 50% 可见时该函数就会被执行。

然后你必须定义要观看的元素

var target = document.querySelector('.flip-card');
observer.observe(target);

最后，您需要通过定义回调函数来指定元素在视口(viewport)中可见后应发生的情况:

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // here you animate another element and do whatever you like
  });
};

如果您需要支持旧版浏览器，请使用 official polyfill from w3c.

如果您不想在元素再次滚动到 View 中时再次触发动画，那么您 can also unobserve an element一旦它被动画化。