1

想不通，需要另一双眼睛。页脚在页面底部正确显示。单击后，跟踪将显示在控制台中。不在任何浏览器中为过渡设置动画。感谢您的关注！！

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

}

4

1 回答 1

0

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

作为奖励，这里为您提供了一些简化的 JS：

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

见http://jsfiddle.net/MD8HL/

于 2012-12-11T20:09:25.177 回答