Question

On my page，点击链接会在推送页面时为菜单添加菜单，为菜单腾出空间。它全部使用query { viewer { game } } CSS属性进行动画处理。出于某种原因，某些元素可以正确地生成动画，而其他元素则不会：具体来说，顶部栏根本没有动画。谁能告诉我为什么？

CSS

transition

HTML

#top_menu {
    position: absolute;
    top: 0;
    background: #eee;
    padding: 20px;
    width: 100%;
}
#mobile_menu {
    position: absolute;
    left: -280px;
    background: #ddd;
    width: 280px;
    height: 100%;
    z-index: 99;

}
.left_0 {
    left: 0 !important;
}
.left_280 {
    left: 280px !important;
}
.left_minus_280 {
    left: -280px !important;
}
body,
.wrap,
#mobile_menu,
#top_menu {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

的JavaScript

<div id='wrap'>
  <div id='mobile_menu'>
    mobile menu
  </div>
  <div id='top_menu'>
    <a href='#'>menu</a>
  </div>
</div>

Answer 1

一切都很好，你只是错过了left 0来加入#top_menu。

#top_menu {
    position: absolute;
    top: 0;
    background: #eee;
    padding: 20px;
    width: 100%;
    left:0;
}

Answer 2

您需要在left: 0中指定#top_menu。

它会将top_menu的左边缘设置为最近的祖先#mobile_menu的右边缘的右边。所以他们将一起过渡。

过渡属性不适用

2 个答案: