时间戳

首页 > 解决方案 > 悬停效果不适用于变换：rotateY

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

问题描述

您好，我已经从 w3schools 更改了翻转卡片元素，并添加了 javascript，如果它们在视口中，它们将旋转 60 像素，用户可以理解卡片后面有一个文本。它在滚动上运行良好，但现在我释放悬停效果不起作用。你能帮帮我吗？

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>

标签： javascriptcsstransform

解决方案

如果他们在视口中，他们将旋转 60px，用户可以理解卡片后面有一个文本。

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

IO 就是为此类问题而设计的。使用 IO，您可以在 HTML 元素与另一个元素（或视口）相交时做出反应

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

简要回顾一下要让 IO 正常工作必须做的事情：

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

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

var observer = new IntersectionObserver(callback, options);

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

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

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

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

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
  });
};

如果您需要支持旧版浏览器，请使用w3c 的官方 polyfill。

如果您不想在元素再次滚动到视图中时再次触发动画，那么您也可以在动画后不观察元素。

推荐阅读