javascript - CSS 动画在 Rails 应用程序中不起作用

Question

所以我有一个按钮，我想在用户向下滚动页面时自动隐藏它，并在用户向上滚动时显示它。以下是代码:

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
//= require jquery.infinitescroll

index.html.haml

%a.scrollToTop{:href => "#"}

autohide.js

$(document).ready(function(){

  var prev = 0;
  var $window = $(window);
  var bar = $('.scrollToTop');

  $window.on('scroll', function(){
    var scrollTop = $window.scrollTop();
    bar.toggleClass('hidden', scrollTop > prev);

    prev = scrollTop;
  });

});

application.css.scss

/*
 *= require_tree .
 *= require_self
 */

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";


.scrollToTop{
  width:70px;
  height:70px;
  background: #fff;
  font-weight: bold;
  position:fixed;
  bottom:20px;
  right:20px;
  border-radius:50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);
  -webkit-transform: translateZ(0);
  transition: transform 1s
}

.scrollToTop:hover{
  box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.scrollToTop.hidden{
  transform: translateY(100px);
}

代码运行良好；该按钮确实根据滚动方向隐藏/显示。但问题是，它没有动画，即它会瞬间隐藏和显示，而不是上下滑动。知道是什么原因造成的吗？提前致谢!

编辑:通过在 .scrollToTop.hidden{} 中添加 display: inline !important; 来修复此问题

Answer 1

对我来说，您可以找到 turbolinks 问题 here ，在他们谈论 rails 5 的链接中，大约 4 有类似的问题。