Question

我有一个div，我旋转并将其放在屏幕外。现在，如果用户向下滚动页面，我将添加Animate.css中的动画类这很好用。但旋转变换丢失了。

这是我的代码：

...
<h1>Hello, world!</h1>
...

<div id="backToTop" class="animated">
    <i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i>
</div>

#backToTop {
    display: none;
    background-color: #3b7aad;
    height: 324px;
    width: 324px;
    position: fixed;
    bottom: -234px;
    right: -234px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    color: #000;
}

   $(document).ready(function() {
      var backToTop;
      function yScroll() {

        backToTop = document.getElementById('backToTop');
        yPos = window.pageYOffset;

        if (yPos > 200) {
          $('#backToTop').stop(true, true).removeClass('slideOutDown');
          $('#backToTop').stop(true, true).addClass('slideInUp');
          $('#backToTop').stop(true, true).show();
        } else {
          $('#backToTop').stop(true, true).removeClass('slideInUp');
          $('#backToTop').stop(true, true).addClass('slideOutDown');
        }

      }
      window.addEventListener("scroll", yScroll);
    });

我在jsfiddle上做了一个演示

https://jsfiddle.net/9L73g5jh/

Answer 1

我修好了。

我必须在旋转的div周围添加一个包装器。

这是一个有效的演示： https://jsfiddle.net/9L73g5jh/6/

<div id="backToTopWrapper" class="animated">
   <div id="backToTop">
      <i class="fa fa-chevron-up fa-lg" aria-hidden="true"></i>
   </div>
</div>

#backToTopWrapper {
    display: none;
    position: fixed;
    bottom: -234px;
    right: -234px;
}

旋转的div。使用屏幕外幻灯片动画

1 个答案: