调整“宽度”属性动画时不可见的手柄大小

Posted

技术标签:

【中文标题】调整“宽度”属性动画时不可见的手柄大小【英文标题】:Resize Handles not visible while animating "width" property 【发布时间】:2013-06-07 07:57:02 【问题描述】:

我在使用带有 jquery ui 可调整大小元素的 jquery animate 时遇到问题。如果我想为可调整大小元素的宽度设置动画,resizeHandle(在我的示例中为绿色)将在动画期间消失。例如,如果我为它的 left 属性设置动画,则将正确显示调整大小的句柄。

我把它归结为一个非常简单的例子来重现问题。

我的 html 如下所示:

<div id="myDiv" class="resizable rectangle"></div>
<button type="button" id="animate">Animate Width</button><br/>
<button type="button" id="animate2">Animate Left</button>

这是 JS 部分:

var widthState = 0;
var leftState = 0;

$(".resizable").resizable(
    handles: "e"
);

$("#animate").click(function(target)
    $(".resizable").animate(
        width: widthState > 0 ? 200 : 5,        
    ,
        complete: function()
            widthState = widthState > 0 ? 0 : 1;
        
    );
);

$("#animate2").click(function(target)
    $(".resizable").animate(
        left: leftState > 0 ? 0 : -200,        
    ,
        complete: function()
            leftState = leftState > 0 ? 0 : 1;
        
    );
);

最后是 CSS:

.rectangle
    background: red;
    width: 200px;
    height: 200px;


.ui-resizable-handle
    background: green;

我也在一个工作的 JSFiddle 中把它放在了一起:

http://jsfiddle.net/HymFB/1/

我无法弄清楚为什么会发生这种情况。有没有办法解决这个问题?

【问题讨论】:

【参考方案1】:

试试这个:

.rectangle
    background: red;
    width: 200px;
    height: 200px;
    overflow: visible !important;  /* to fix disappearing re-size bar */

【讨论】:

以上是关于调整“宽度”属性动画时不可见的手柄大小的主要内容,如果未能解决你的问题,请参考以下文章

自定义 UIToolbar 用动画调整大小

如何以编程方式调整按钮动画的大小

WPF 动画:绑定到情节提要动画的“To”属性

C#关于winforms窗体大小边框移动动画等属性

绑定到可见性属性时动画不正确(奇数)

调整大小时的 SwiftUI 文本剪辑