css - 缓动/过渡后 Pane 不调整大小

Question

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

按照这个例子，我想动画化(水平扩展/收缩)左 Pane ，并让右 Pane 自动调整大小。

我已经用这些样式设置了我的父容器 { display: box;盒子方向:水平； } 。子 div 具有“box-flex”和缓动“transitions”。但是右 Pane 没有调整大小。

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

谢谢

一)

    %html{ :lang => "en" } 

      %head
        %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" }
        // [if IE]
        //  
        // [endif]

        %script{ :type => "text/javascript", :src => "js/css3-mediaqueries.js" }
        %script{ :type => "text/javascript", :src => "js/jquery-1.6.3.js" }
        :javascript
          $(document).ready(function() {
            $(".left-col").click(function() {
              console.log("right-col clicked");
              $(".left-col").toggleClass("closed");
            });
          }); 

      %body 
        .container
          .header Header
          .main-content 
            .left-col.debug Left Panel
            .right-col.debug Right Panel
        .footer Footer

B)

    @import "compass/layout"
    @import "compass/layout/stretching"
    @import "compass/css3/box"
    @import "ceaser-easing"

    $header-height : 50px
    $footer-height : 150px
    $left-col-width : 250px
    @include sticky-footer( $footer-height , "#container", "#left-col", "#footer")

    html, body
      min-height: 400px 
      min-width: 800px
      height: 100%

    .header
      background: #999
      height: $header-height
      box-shadow: 0 4px 6px #543

    .footer 
      background: #fdd 
      clear: both
      z-index: 10
      height: $footer-height

    .container
      padding: 0px
      width: 100%
      min-height: 100% 
      margin: 0 auto -150px

    .main-content
      @include display-box
      @include box-orient(horizontal)

    .left-col
      width: $left-col-width
      @extend .stretched
      +stretch-y( $offset-top: $header-height, $offset-bottom: $footer-height )
      @include box-flex(1)
      @include ceaser-transition(easeInOutExpo, width, 500ms, 0s)

    .left-col.closed
      width: 500px

    .right-col
      @extend .stretched
      @include box-flex(1)
      +stretch( $offset-top : $header-height, $offset-left : $left-col-width, $offset-bottom : $footer-height )

    .debug
      border-style: solid
      border-width: 1px

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