在缓动/过渡后，窗格没有调整大小

Question

我有这些HAML (A)和Sass (B)文件(使用I . compass和ii. compass)。背景中的止动-0.2)。

根据这个例子，我想动画(水平扩展/缩小)左窗格，并有右窗格自动调整大小。

我用这些样式设置了父容器{display: box;box-orient:水平;}。子div具有'box-flex'和easing 'transitions'。但是右窗格没有调整大小。

我想知道我还需要在里面放些什么?

感谢<标题> A) <>之前%html{:lang => "en"}%的头%meta{:charset => "utf-8"}{%链接:rel =>"样式表":href =>"css/1140. css: type =>"文本/css:媒体=> "屏幕"}%link{:rel => "stylesheet"，:href => "css/styles.css"，:type => "text/css"，:media => "screen"}{%链接:rel =>"样式表":href =>"css/thing.css":type =>"文本/css:媒体=> "屏幕"}%link{:rel => "stylesheet"，:href => "css/screen.css"，:type => "text/css"，:media => "screen, projection"}{%链接:rel =>"样式表":href =>"css/print.css":type =>"文本/css:媒体=>"打印"}//[if IE]////(endif)%script{:type => "text/javascript"，:src => "js/css3-mediaqueries.js"}%script{:type => "text/javascript"，:src => "js/jquery-1.6.3.js"}: javascript$(文档)时函数(){$ (" .left-col ") .click(函数(){console.log("right-col点击");$ (" .left-col ") .toggleClass("关闭");}）;}）;%的身体.container.header头.main-content.left-col.debug左面板右面板.footer页脚之前<标题> B) <>之前@ import"罗盘/布局"@ import"罗盘/布局/拉伸"@ import"罗盘/css3/盒"@ import"ceaser-easing"$header-height: 50px$footer-height: 150px$left- color -width: 250px@include sticky-footer($footer-height， "#container"， "#left-col"， "#footer")html,身体最小高度:400像素min-width: 800像素高度:100%.header背景:# 999高度:$ header-heightBox-shadow: 0 4px 6px #543.footer背景:# fdd明确:z - index: 10高度:$ footer-height.container填充:0 px宽度:100%最小高度:100%边距:0 auto -150px.main-content@include展示盒@include box-orient(水平).left-col宽度:$ left-col-width@extend .stretched+stretch-y($offset-top: $header-height， $offset-bottom: $footer-height)@include box-flex (1)@ incler -transition(easeInOutExpo, width, 500ms, 0s).left-col.closed宽度:500像素.right-col@extend .stretched@include box-flex (1)+stretch($offset-top: $header-height， $offset-left: $left- color -width， $offset-bottom: $footer-height).debug边框样式:固体边框宽度:1 px

Answer 1

似乎你不应该将position: absolute应用于box-flex的孩子，因为这可以防止它们在改变大小时相互"推"。

解决方法是将position: absolute应用于.main-content，并从那里定位:

.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/