html - transitionX 将文本移离屏幕

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)。

将以下条目添加到您的 CSS:

.content {
    transition: transform .5s;
    padding: 10px;
    width: 100%;
}    

.content.visible {
    width: calc(100% - 250px)
}

当侧边栏打开时，它会将 .content、250px 向右平移，使其离开屏幕。通过设置上述属性，您可以使 .content 的总宽度为 100% - 250px(即屏幕宽度减去侧边栏的宽度)，因此它不会移出屏幕。