缓动/过渡后窗格未调整大小

Posted 2023-03-05

【中文标题】缓动/过渡后窗格未调整大小

【英文标题】：Pane not resizing after easing / transition

【发布时间】：2011-12-02 15:12:42

【问题描述】：

我有这些 HAML (A) 和 Sass (B) 文件（在后台使用 i. compass 和 ii. quieter-easing-0.2 ）。

按照这个例子，我想为左窗格设置动画（水平扩展/缩小），并让右窗格自动调整大小。

我已经用这些样式设置了我的父容器 display: box; box-orient：水平； 。子 div 有 'box-flex' 和缓动 'transitions'。但是右窗格没有调整大小。

我想知道我还需要放什么？

谢谢

A)

%html :lang => "en" ％头 %meta :charset => "utf-8" %link :rel => "stylesheet", :href => "css/1140.css", :type => "text/css", :media => "screen" %link :rel => "stylesheet", :href => "css/styles.css", :type => "text/css", :media => "screen" %link :rel => "stylesheet", :href => "css/thing.css", :type => "text/css", :media => "screen" %link :rel => "stylesheet", :href => "css/screen.css", :type => "text/css", :media => "screen, projection" %link :rel => "stylesheet", :href => "css/print.css", :type => "text/css", :media => "print" // [如果是 IE] // // [万一] %script :type => "text/javascript", :src => "js/css3-mediaqueries.js" %script :type => "text/javascript", :src => "js/jquery-1.6.3.js" :javascript $(文档).ready(函数() $(".left-col").click(function() console.log("右键单击"); $(".left-col").toggleClass("close"); ); ); ％身体 。容器 .header 标头 .main-内容 .left-col.debug 左面板 .right-col.debug 右面板 .footer 页脚

B)

@import "指南针/布局" @import "指南针/布局/拉伸" @import "指南针/css3/box" @import "缓动" $标头高度：50px $页脚高度：150px $left-col-width : 250px @include 粘页脚( $footer-height , "#container", "#left-col", "#footer") html，正文 最小高度：400px 最小宽度：800px 高度：100% .header 背景：#999 高度：$标头高度 盒子阴影：0 4px 6px #543 .footer 背景：#fdd 明确：两者 z 指数：10 高度：$页脚高度 。容器 填充：0px 宽度：100% 最小高度：100% 边距：0 自动 -150px .main-内容 @include 显示框 @include box-orient（水平） .left-col 宽度：$left-col-宽度 @extend .拉伸 +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height ) @include box-flex(1) @include 停止者过渡（easeInOutExpo，宽度，500ms，0s） .left-col.close 宽度：500 像素 .right-col @extend .拉伸 @include box-flex(1) +stretch( $offset-top : $header-height, $offset-left : $left-col-width, $offset-bottom : $footer-height ) .调试 边框样式：实心 边框宽度：1px

【问题讨论】：

如果您将已编译的输出放在 jsfiddle.net 中会有所帮助，人们不太可能拥有您的完整堆栈来检查您的问题。

天哪，我不知道 jsfiddle 在那里。我只是不想弄乱这篇文章。这是 HAML 和 Sass 文件的编译结果：jsfiddle.net/SqC8W

【参考方案1】：

看来您不应该对box-flex 的子级应用position: absolute，因为这样可以防止它们在更改大小时相互“推动”。

解决方法是在.main-content 上应用position: absolute 并从那里定位：

.main-content
  @include display-box
  @include box-orient(horizontal)
  +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height )

.left-col
  width: $left-col-width
  @extend .stretched
  @include box-flex(1)
  @include ceaser-transition(easeInOutExpo, width, 500ms, 0s)

.left-col.closed
  width: 500px

.right-col
  @extend .stretched
  @include box-flex(1)

您可以在此处查看实际情况： http://jsfiddle.net/yMjH6/

【讨论】：

施威特。谢谢老兄——有第二双眼睛总是好的。

没有问题！只是提醒您单击箭头旁边的复选按钮，以便其他人知道答案是正确的。

像晚餐一样完成。也相当令人印象深刻的投资组合。我想做一个类似的投资组合页面，以及一个 del.icio.us 的替代品。最新版本太糟糕了，我听说雅虎正在淘汰该产品……唉。