在窗口调整大小上添加转换

Question

我正在尝试为我的网站创建自适应布局。

这就是我想要做的事情 -

当我重新调整窗口大小时，窗口的宽度仅从文档的右侧减少100个像素。我希望它发生在这个盒子的各个方面。

在我重新调整窗口大小的同时，我想在此块上添加转换。 但转换适用于在css中分配的属性。

如何添加窗口大小的转换？

的CSS -

.box
{
    height:100%;
    width:100%;
    border:2px solid #ccc;
    position:absolute;
}
.box-narrow
{
    -webkit-transition:all .6s ease-in-out;
    transition:all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
}

的jQuery -

$(function(){
   var windowwi=$(window).width();
windowwi-=100;
    $(window).on('resize',function(){
        $('.box').width(windowwi);
        $('.box').addClass(
    });
});

Fiddle

Answer 1

你的jquery代码包含一个错误，而且你不需要使用这些类，只是因为当你在元素上为一个元素分配一个转换时，只要元素改变就会转换到转换。

所以这是你的jquery代码：

$(function(){
    $(window).on('resize',function(){

   var windowwi=$(window).width();
        windowwi-=100;
        $('.box').width(windowwi);
    });
});

请注意，我将windowwi变量放在'resize'事件函数上，因此您可以在调整大小时获得窗口的大小。 这就是css：

.box
{
    height:100%;
    width:100%;
    border:2px solid #ccc;
    position:absolute;
    -webkit-transition:all .6s ease-in-out;
    transition:all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
}

Fiddle