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/

CSS过渡不是动画

1 个答案: