El panel no cambia de tamaño después de suavizar / transición

0

Tengo estos archivos HAML (A) y Sass (B) (usando i. Compass y ii. Ceaser-easing-0.2 en segundo plano).

Según este ejemplo, quiero animar (expandir / encoger horizontalmente) el panel izquierdo y hacer que el panel derecho cambie de tamaño automáticamente.

He configurado mi contenedor principal con estos estilos {display: box; caja de orientación: horizontal; }. Y los divs secundarios tienen ' box-flex ' y facilitan las ' transiciones '. Pero el panel derecho no está cambiando de tamaño.

Me pregunto qué más tengo que poner ahí.

Gracias

A)

    %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

2
  • Sería útil si colocara su salida ya compilada en jsfiddle.net , es poco probable que la gente tenga su pila completa para verificar su problema. methodofaction 6/10/11 a las 23:59
  • Oh, dulce, no sabía que jsfiddle estaba ahí fuera. Simplemente no quería estorbar esta publicación. Aquí están los resultados compilados de los archivos HAML y Sass: jsfiddle.net/SqC8WNutritioustim 7/10/11 a las 0:59
0

Parece que no deberías aplicarlo position: absoluteen niños de box-flex, ya que esto evita que se "empujen" entre sí cuando cambian de tamaño.

La solución alternativa sería aplicar position: absoluteen su .main-contentlugar y posicionar desde allí:

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

Puede comprobarlo aquí en acción: http://jsfiddle.net/yMjH6/

3
  • Schweeeet. Gracias amigo, siempre es bueno tener un segundo par de ojos. Nutritioustim 7/10/11 a las 20:26
  • ¡No hay problema! Solo un recordatorio para hacer clic en el botón de verificación junto a las flechas para que otras personas sepan que la respuesta es correcta. methodofaction 7/10/11 a las 20:56
  • Hecho como una cena. Una cartera bastante impresionante también. Quiero hacer una página de portafolio similar, así como un reemplazo de del.icio.us. La versión más reciente es terrible, y escuché que Yahoo está retirando el producto ... Suspiro. Nutritioustim 8/10/11 a las 0:46