переход с положением абсолютный

Question

У меня есть div, который позиционируется абсолютно для моего заголовка-тега. Все в порядке. С JavaScript я переключаю классы display_block и display_none, когда я нажимаю на свою кнопку.

Все работает нормально. div, который получает display: none и display: block с переключателем, получает позицию right: -100%, когда это display:none и right: 0, когда его display: block.

Также работает отлично. Но есть одна проблема. У меня есть transition: all 1s ease-in-out, но я не получаю этого потока. Это только здесь или ушло. Но никакого эффекта. Зачем?

header { 
 
    position: relative; 
 
} 
 

 
#ware_cart { 
 
    position: absolute; 
 
    top: 80px; 
 
    width: 35%; 
 
    transition: all 1s ease-in-out; 
 
    
 
} 
 

 
.display_none { 
 
    display: none; 
 
    right: -100%; 
 
} 
 

 
.display_block { 
 
    display: block; 
 
    right: 0; 
 
}

<header> 
 
    <div id="ware_cart" class="display_none"> 
 
    <!-- stuff i like to show --> 
 
    </div> 
 
</header>

Answer 1

Как Paulie D сказал, вы не можете перейти display.

Кроме того, если элемент начинается right: 100% нет необходимости скрывать его.

Попробуйте этот фрагмент:

$('#toggle').click(function() { 
 
    $('#ware_cart').toggleClass('move_right'); 
 
});

header { 
 
    position: relative; 
 
} 
 

 
#ware_cart { 
 
    position: absolute; 
 
    width: 35%; 
 
    top: 80px; 
 
    right: 100%; 
 
    transition: right 1s ease-in-out; 
 
} 
 

 
#ware_cart.move_right { 
 
    right: 0%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<header> 
 
    <div id="ware_cart"> 
 
    stuff i like to show 
 
    </div> 
 
    <div id="toggle"> 
 
    Toggle it! 
 
    </div> 
 
</header>