Javascript 使用MooTools在浏览器中更改固定位置的动画中弹出

我需要做一个动画，这是本质上的图像将在全屏时，我点击屏幕，它将弹出一个去一个div。为此，我已经使用了以下代码

<div class="header_relative">
<header id="cover_photo_header" class="large">
<img></img>
 </header>
 </div>

---

但左边的动画正在变化。你们能帮我解决这个问题吗？

我在你们的

标题

CSS类中看到一个丢失的点（

）。也是代码中的

func，delay

部分我不知道你的意思。我已经在我的代码中设置了它，并且我们还可以删除它们，图像应该在屏幕的中心向上移动，并且应该可以看到图像的最后10px，这样我的下一个功能是当我们单击n该图像（10px）时。图像应该在屏幕的中心弹出，你能修改我上面发布的JSFIDLE吗？如果你点击图片，你预计会发生什么？

<style>
header_relative
{
position:relative
}
  header, a, img{
  transition: all 2s;
  -moz-transition: all 2s;
 -webkit-transition: all 2s; 
 -o-transition: all 2s; 
}
header.large
{
 position: fixed;
  top: 0;
    left: 0; 
   width:100%;
  height:100%;
 overflow: hidden;
 z-index: 19;

}
header.small
{
position: fixed;
overflow: hidden;
 z-index: 19;
 }
</style>

 window.addEvent('click', function(){
$('global_content').getElement('header.large').style.width = '770px';
$('global_content').getElement('header.large').style.height = '300px';
   $('global_content').getElement('header.large').style.margin = 'auto';
 $('global_content').getElement('header.large').style.top = '-294px';
 $('global_content').getElement('header.large').style.left = '29.1%';
setTimeout(function(){
//do what you need here
$('global_content').getElement('header').removeClass("large").addClass("small");
func, delay
}, 2000);
});