javascript - CSS 过渡不动画

Question

无法解决这个问题，需要另一双眼睛。页脚在页面底部正确显示。单击时，跟踪会出现在控制台中。不在任何浏览器中设置动画过渡。感谢您的关注!

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

Answer 1

您的问题很简单 ;)。假设您要显示页脚，#appfooter .transition 适用于具有 transition 样式的元素，这些元素是 appfooter 元素的后代。使用 #appfooter.transition，或简单地使用 .transition。 (我敢肯定你一定是不小心错过了这个。)

作为奖励，这里有一些简化的 JS:

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

参见 http://jsfiddle.net/MD8HL/