在窗口调整大小时添加过渡答案

【问题标题】：Add transition on window resize在窗口调整大小时添加过渡
【发布时间】：2013-07-18 16:32:01
【问题描述】：

我正在尝试为我的网站创建响应式布局。

这就是我想要做的-

当我重新调整窗口大小时，窗口的宽度仅从文档右侧减少了 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

【问题讨论】：

标签： jquery resize css-transitions window-resize

【解决方案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

【讨论】：