CSS權限：-50，過渡不起作用

Question

我有以下HTML / CSS

 .cart-preview .body { visibility: hidden; position: fixed; width: 400px; height: 100%; z-index: 99; background-color: #fff; right: -20; } .cart-preview:hover .body { visibility: visible; position: fixed; transition: right 1s linear; right: 0; } 

 <div class="body"> <ul> </ul> <div class="cart-subtotals"> <div class="products"> <span class="label">Subtotal</span> <span class="value">0</span> </div> <div class=""> <span class="label"></span> <span class="value"></span> </div> <div class="shipping"> <span class="label">Shipping</span> <span class="value">0</span> </div> <div class=""> <span class="label"></span> <span class="value"></span> </div> </div> <div class="cart-total"> <span class="label">Total sum</span> <span class="value">0</span> </div> </div> 

我想讓.body類承擔所有顯示器的高度，這對於底部效果很好，但是在頂部，盡管位置固定，但沒有填充空間。 正確的屬性以及過渡也不起作用。

元素的位置更靠右，但是我為之輸入的所有值都right:沒關系，div保持在相同位置。
我想在飛機上懸停一個飛入式動畫，也許有人可以幫助我調整高度和高度。

順便說一句：這是MVCE。 body div嵌套在其他div中，並且它們大多數是相對位置的，因此我對body使用固定位置，並且沒有發布嵌套該主體的其他div。

Answer 1

right:-20; 不管用。 您應該在那里定義測量單位。 現在過渡在我的小提琴中也很好用。

檢查並讓我知道這里是否有任何問題。

http://jsfiddle.net/Sampath_Madhuranga/Lwebxhkn/8/

 .cart-preview { position:relative; } .cart-preview .body { visibility: hidden; position: fixed; width: 400px; height: 100%; z-index: 99; background-color: #fff; right: -20px; } .cart-preview:hover .body { visibility: visible; position: fixed; transition: right 1s linear; right: 0; } 

 <div class="cart-preview"> <span>cart preview</span> <div class="body"> <ul> </ul> <div class="cart-subtotals"> <div class="products"> <span class="label">Subtotal</span> <span class="value">0</span> </div> <div class=""> <span class="label"></span> <span class="value"></span> </div> <div class="shipping"> <span class="label">Shipping</span> <span class="value">0</span> </div> <div class=""> <span class="label"></span> <span class="value"></span> </div> </div> <div class="cart-total"> <span class="label">Total sum</span> <span class="value">0</span> </div> </div> </div> 

謝謝