Question

这是我关于堆栈交换的第一个问题，如果我没有提供足够的信息，请随时告诉我。我已经找到了解决我的特定问题的方法，但没有找到任何相关内容，所以这里就是......

我正在尝试实现侧边栏导航，在按下菜单按钮时滑动。页面的其余部分应随之滑动以使其顺畅流动。我使用了一些简单的javascript来打开/关闭导航侧栏div和内容换行div的.active类。作为参考，我正在尝试这样做：http://antrikshy.com/。 transition属性应用于sidebar div和content-wrap元素，但仅影响导航栏。在检查网页后，我可以看到css属性已成功应用于content-wrap元素，但它们不起作用。这已经在safari和firefox中进行了测试，结果没有变化。

请参阅CodePen上的笔sidebar transition example。

以下是内容包装上的单个css：

.content-wrap {
    position: relative;
    transition: all ease 2.5s;
    padding: 10px;
    overflow: auto;
}

Answer 1

您需要定义过渡的两侧。如果您要在left上进行转换，则需要left属性为0，以便转换具有起点。

.content-wrap {
    position: relative;
    transition: all ease 2.5s;
    padding: 10px;
    overflow: auto;
  left:0 /* THIS */
}

在我的浏览器上修复笔 - https://codepen.io/anon/pen/EvKQxR。

CSS过渡属性对div

1 个答案: