javascript - 绝对位置过渡

Question

我有一个 div 绝对定位到我的 header 标签。一切都好。使用 JavaScript，当我点击我的按钮时，我切换类 display_block 和 display_none。

一切正常。div 获得 display: none 和 display: block 与切换，获得位置 right: -100% 当它是 display:none 时，right: 0 当它的 display: block 时。

也很好用。但是有一个问题。div 得到了 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 所说，您无法转换显示。

此外，如果元素从 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>