CSS动画无法在Rails应用程序中运行

时间:2016-06-28 14:46:01

标签: javascript jquery css ruby-on-rails

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

的application.js

        [FindsBy(How = How.Name, Using = "role")]
        public ReadOnlyCollection<IWebElement> radPercentage { get; }

index.html.haml

radPercentage[2].Click();

autohide.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

application.css.scss

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

代码工作正常;按钮会隐藏/显示,具体取决于滚动方向。但问题是,它没有动画,即它瞬间隐藏和显示而不是上下滑动。知道是什么导致了这个吗?提前谢谢!

编辑:通过在$(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; }); });

中添加/* *= 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); } 来修复此错误

1 个答案:

答案 0 :(得分:0)

对我来说,看起来像turbolinks问题你可以找到here,在他们谈论的链接中,大约有4个轨道有类似的问题。