旋转div.使用离屏滑动动画

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