在这段生成的购物车面板上线前进行审查。
通过短暂滑动过渡打开和关闭可访问的购物车面板，并提供可靠的减少动态效果路径。
HTML
<button id="open-cart">Open cart</button>
<aside id="cart" class="cart" hidden tabindex="-1">
<button id="close-cart">Close</button>
<p>Your cart is ready.</p>
</aside>
<style>
.cart {
position: fixed;
left: -22rem;
transition: all 300ms ease;
}
.cart.open { left: 0; }
</style>
<script>
const cart = document.querySelector('#cart');
document.querySelector('#open-cart').onclick = () => {
cart.hidden = false;
cart.classList.add('open');
};
document.querySelector('#close-cart').onclick = () => {
cart.classList.remove('open');
cart.hidden = true;
};
cart.addEventListener('transitionend', () => cart.focus());
</script>
生成代码仅作示例，不代表任何特定模型