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を持つ要素に適用されます。、または単に代わりに使用してください。（これを誤って見逃したに違いありません。）transitionappfooter#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 に答える