Question

我有侧边菜单和内容页面。当侧面菜单可见时，它会将所有内容“移动”到右侧。但是已经在页面右侧的内容部分远离屏幕（我希望它的行为就像容器的宽度减少一样）

工作示例： https://arturtakoev.github.io/redux-reader/ 如果您选中其中一个框然后移开菜单，您可以在右侧看到“创建时间”，但如果您打开菜单则移动到屏幕外。

/* Container */
.content {
    transition: transform .5s;
    padding: 10px;
}

.hidden {
    -webkit-transform: translateX(0);
}

.visible {
    -webkit-transform: translateX(250px);
}
/*Posts*/
.title {
    font-size: 15px;
    font-weight: 350;
    margin-bottom: 5px;
}

.info {
    opacity: 0.54;
    justify-content: space-between;
    display: flex;
    text-overflow: clip;
}

应用程序的JSX：

    <div>
        <div>
            <SideMenu onClick={this.handleSelectSource.bind(this)}
                onSelectAll={this.handleSelectAll.bind(this)}
                onUnselectAll={this.handleUnselectAll.bind(this)}
            />
        </div>

        <div className={`${styles.content} ${toggleMenu.isVisible ? styles.visible : styles.hidden}`}>
            <div class={styles.hamburger} onClick={this.handleToggle.bind(this)} className={toggleMenu.isVisible ? styles.change : ''}>
                <div class={`${styles.bar1}`}></div>
                <div class={`${styles.bar2}`}></div>
                <div class={`${styles.bar3}`}></div>
            </div>

            {isEmpty === true ?

                <div className={styles.info}>
                    Select source
                    </div>

                : (posts.length === 0 ?
                    <div className={styles.info}>
                        <img src={require('../assets/loading.svg')} />
                    </div>
                    : <div ><Posts posts={posts} /></div>
                )
            }
        </div>
    </div>

对于内容（帖子）

<div>
    <ul className={`list-group list-group-flush`}>
        {posts.map((post, i) =>

            <a href={post.url} target="_blank" className="list-group-item list-group-item-action flex-column align-items-start" key={i}>
                <div className="d-flex w-100 justify-content-between">
                    <p className={styles.title}>{post.title}</p>
                </div>
                <div className={`${styles.info}`}>
                    <small>{post.site}</small>
                    <small>{time_ago(post.created)}</small>
                </div>
            </a>
        )}
    </ul>
</div>

Answer 1

您可以通过将.content类.visible的宽度设置为sidebar，width: calc(100% - 250px)为.content { transition: transform .5s; padding: 10px; width: 100%; } .content.visible { width: calc(100% - 250px) }来解决此问题。

将以下条目添加到CSS中：

.content

当侧边栏打开时，它会将250px，.content向右翻译，从而迫使其离开屏幕。通过设置上述属性，您可以使100% - 250px的总宽度为rysnc（即屏幕宽度减去侧边栏的宽度），因此它赢了“ t离开屏幕。

transitionX将文本移出屏幕

1 个答案: