jquery - 在窗口调整大小时添加过渡

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(
    });
});

小提琴

Answer 1

您的 jquery 代码包含一个错误，而且您不需要使用这些类，因为当您在元素上分配转换时，只要元素更改，浏览器就会进行转换。

所以这是你的jQuery代码：

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

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

请注意，我将windowwi变量放在“调整大小”事件函数上，因此您可以在调整大小时获得窗口的大小。这是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;
}

小提琴