html - CSS Ease-in-out 到全屏

Question

我有一个包含图像的黑色背景 div。

  <div id="Banner">
  <img onclick="expand();" src="hola.jpg">
  </div>

  #Banner {
    position:relative;
    height:50px;
    width:50px;
    margin:0 auto;
    background-color:#000000;
    -webkit-transition: all 0.5s ease-in-out 0.5s;
    -moz-transition: all 0.5s ease-in-out 0.5s;
    -o-transition: all 0.5s ease-in-out 0.5s;
    transition: all 0.5s ease-in-out 0.5s;
  }

<script type="text/javascript">
  function expand(){
    document.getElementById('Banner').style['height'] = '250';
    document.getElementById('Banner').style['width'] = '250';
  }
</script>

所以当用户点击图片时，div 会转换为 250, 250。

我的问题是，我想让它过渡到全屏。以下javascript功能确实扩展到全屏，但过渡效果没有出现。我需要在没有 jquery 的情况下通过 javascript 代码来完成。

  function expand(){
    document.getElementById('Banner').style['position'] = 'absolute';
    document.getElementById('Banner').style['height'] = '100%';
    document.getElementById('Banner').style['width'] = '100%';
    document.getElementById('Banner').style['top'] = '0';
    document.getElementById('Banner').style['left'] = '0';
  }

请指教。

更新:解决方案

下面的 Roger 提供了一个替代解决方案。如果文件已经滚动，是另一个地方。会将 div 扩展到整个浏览器屏幕。

sz=getSize();        //function returns screen width and height in pixels
currentWidth=200;
currentHeight=200;
scalex=sz.W/currentWidth;
scaley=sz.H/currentHeight;
transx=0-((document.getElementById("Banner").offsetLeft+(currentWidth/2))-(sz.W/2))+document.body.scrollLeft;
transy=0-((document.getElementById("Banner").offsetTop+(cuttentHeight/2))-(sz.H/2))+document.body.scrollTop;
transx = transx.toString();
transy = transy.toString();
document.getElementById("Banner").style['-webkit-transform'] = 'translate('+transx+'px,'+transy+'px) scale('+scalex+','+scaley+')';

Answer 1

如果你所说的过渡效果是指动画，你必须在你想让它动画的时候划分属性的变化；记住:动画会及时发生。如果你只是设置

document.getElementById('Banner').style['width'] = '100%';

它会立即执行，您需要改为在 Y 毫秒内从 X% 到 100%；例如

function changeWidth(){
    var initialWidth = document.getElementById('Banner').style['width'];
    var stepValue = (CALCULATE_YOUR_FULL_WIDTH - currentWith)/1000;

    var animate = function(){
        var element = document.getElementById('Banner');
        element.style['width'] = element.style['width'] + stepValue;
    }

    setInterval(animate, 1);
}

我希望你明白这个想法，我没有测试它所以我不能保证它有效。

    function changeWidth(){
        var initialWidth = 200;
        var stepValue = (1000 - initialWidth)/1000;

        var currentSize = initialWidth;
        var animate = function(){
            currentSize = currentSize + stepValue;
            var element = document.getElementById('Banner');
            element.style['width'] = (currentSize + stepValue)*1 + 'px';
        };

        setInterval(animate, 1);
    };

这行得通，你将不得不从它开始工作，因为它很丑:P，阅读实现它的 jquery 函数，看看它是如何做到的，这是一个好的开始。

编辑

好吧，我最终做到了。

http://jsfiddle.net/HJwPF/