Переход 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/