CSS動畫在Rails應用程序中不起作用

因此，當用戶向下滾動頁面並顯示用戶向上滾動時，我想要自動隱藏一個按鈕。下面是代碼：CSS動畫在Rails應用程序中不起作用

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

的代碼工作正常;該按鈕會根據滾動方向隱藏/顯示。但問題是，它不生動，即它瞬間隱藏並顯示，而不是上下滑動。任何想法是什麼造成這個？提前致謝！

編輯：加入display: inline !important;內.scrollToTop.hidden{}

來源

2016-06-28 Arif

無法重新創建問題https://jsfiddle.net/7y0h9sdo/ – DaniP

我知道，我也在jsfiddle中試過。這就是我困惑的原因。我認爲這是一個rails問題 – Arif

而不是'$（document）.ready（function（）{'use'$（document）.on（'ready page：load'，function（）{' –

對於我固定它它看起來像turbolinks問題，你可以找到here，在鏈接他們談論的軌道5約4也有類似的問題。

來源

2016-10-08 15:14:46 ChaosPredictor

CSS動畫在Rails應用程序中不起作用

回答

相關問題