CSS轉換沒有動畫

無法弄清楚，需要另一雙眼睛。頁腳在頁面底部正確顯示。點擊後，軌跡出現在控制檯中。不在任何瀏覽器中動畫過渡。感謝您的期待！CSS轉換沒有動畫

HTML

<link rel="stylesheet" href="stylesheets/appoverwrite.css" type="text/css" media="screen" /> 
<script type="text/javascript" src="scripts/appscripts.js"></script> 

<div id="appfooter">....</div>

APPOVERWRITE.CSS

#appfooter { 
position:fixed; 
width: 100%; 
bottom: -350px; 
height: 400px; 
clear:both; 
font-size: 11px; 
background: #000; 
border-top: 1px dotted #d83800;  
z-index: 1000; 
transition: bottom 2s; 
-moz-transition: bottom 2s; 
-webkit-transition: bottom 2s; 
-o-transition: bottom 2s; 
} 

#appfooter .transition { 
bottom: 0px; 
}

APPSCRIPT.JS

jQuery(document).ready(function($){ 
    $appfooter = $('#appfooter'); 
    show_footer(); 
}); 


function is_touch_device() { 
    return !! ('ontouchstart' in window); 
} 

function show_footer() { 
    var open = false; 
    $appfooter.click(function() { 
    console.log("show_footer"); 
     if (open == false) { 
      $appfooter.addClass("transition"); 
      open = true; 
     } else { 
      $appfooter.removeClass("transition"); 
      open = false; 
     } 
    });

}

來源

2012-12-11 HappaGirl

你的問題很簡單）。假設您想要顯示頁腳，則#appfooter .transition適用於具有appfooter元素的後代的transition樣式的元素。改爲使用#appfooter.transition，或簡單地使用.transition。（我敢肯定，你一定是弄錯了剛剛錯過了這一點。）

這裏作爲獎金是一些簡單的JS給你：

var appfooter = document.getElementById("appfooter"); 
appfooter.onclick = function() { 
    appfooter.classList.toggle("transition"); 
}

見http://jsfiddle.net/MD8HL/

來源

2012-12-11 20:09:25

啊的空間疑難雜症！謝謝你的捷徑。我嘗試切換，但我需要那裏的classList。非常感謝 – HappaGirl

有時它只需要一雙新鮮的眼睛。如果你想使用jQuery，你確實可以像'$（「＃appfooter」）。toggleClass（「transition」）;''一樣使用'toggleClass'。 'classList'是一個純JS的東西（我比jQuery有更多的經驗，這就是我使用它的原因）。這是你的選擇！ –

CSS轉換沒有動畫

回答

相關問題