顯示孩子的屏幕外父外，直到家長出現足夠寬

比方說，我有一個水平滑動菜單對齊之間切換，而隱藏以後，瀏覽器窗口的左側：顯示孩子的屏幕外父外，直到家長出現足夠寬

Open (has class "open")  Closed (class "open" removed) 
+------+--------------+  +---------------------+ 
|  |    |  |      | 
|  |    |  |      | 
|  |    |  |      | 
|  |    |  |      | 
|  |    |  |      | 
+------+--------------+  +---------------------+

SCSS：

header nav[role="navigation"] { 
    background: $primary-colour; 
    bottom: 0; 
    left: -282px; 
    position: absolute; 
    top: 0; 
    width: 282px; 
    @include transition(left 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000)); 
    &.open { 
     left: 0; 
    } 
}

現在讓我們說，我想一個切換按鈕，要麼：1）在窗口的左側坐着，而菜單被關閉，2）坐在裏面的菜單，右對齊時它是開放的：

Open      Closed 
+--+---+--------------+  +---+-----------------+ 
| | x |    |  | = |     | 
| +---+    |  +---+     | 
|  |    |  |      | 
|  |    |  |      | 
|  |    |  |      | 
+------+--------------+  +---------------------+

此外，還應當履行菜單的過渡，使之正好在該菜單的可見寬度按鈕的寬度相匹配的點贊同的右側。有沒有一種方法可以單獨使用CSS來實現？

來源

2015-05-29 verism

你可以創建的圖標過渡（延遲+時間與菜單的轉換時間相匹配），並在父級（菜單）打開課程時應用它？ – zgood

@zood我可以，但是菜單的轉換有一些緩和，這意味着要做一些可怕的數學來試圖找出相應的鬆動應該如何在按鈕上進行......如果它們都在運動中同時，但會有一個延遲，直到菜單與按鈕一樣寬，此時按鈕將會移動。 – verism

隨着一點點的CSS輕搖，我想出了一個解決方案：

// Some JS to illustrate the animation 
 
$('.nav-toggle').click(function() { 
 
    $('.nav').toggleClass('open'); 
 
});

.window { 
 
    background: lightgrey; 
 
    display: block; 
 
    height: 200px; 
 
    margin: 0 0 10px; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
    width: 400px; 
 
} 
 
.nav { 
 
    background: blue; 
 
    bottom: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 0; 
 
    -webkit-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
    -moz-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
    -ms-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
    -o-transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
    transition: width 250ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
 
} 
 
.nav.open { 
 
    width: 80px; 
 
} 
 
.nav-toggle-wrapper { 
 
    height: 40px; 
 
    float: left; 
 
    min-width: 40px; 
 
    width: 100%; 
 
} 
 
.nav-toggle { 
 
    background: red; 
 
    height: 40px; 
 
    float: right; 
 
    width: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="window"> 
 
    <div class="nav"> 
 
    <div class="nav-toggle-wrapper"> 
 
     <div class="nav-toggle"></div> 
 
    </div> 
 
    </div> 
 
</div>

而且，看到的jsfiddle爲例>link

來源

2015-05-29 16:33:31 verism

顯示孩子的屏幕外父外，直到家長出現足夠寬

回答

相關問題