transitionX将文本移出屏幕
transitionX将文本移出屏幕
提问于 2018-05-31 19:12:22
我有一个侧边菜单和一个内容页面。当侧边菜单可见时，它会将所有内容“移动”到右侧。但是已经在页面右侧的那部分内容会从屏幕上移开(我希望它的表现就像容器的宽度减小一样)
工作示例：https://arturtakoev.github.io/redux-reader/如果您选中其中一个框，然后将菜单移开，您可以在右侧看到“time created”，但如果您打开菜单，则会移出屏幕。
/* 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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 19:24:58
您可以通过在.content具有.visible类时(即当sidebar打开时)将其宽度设置为width: calc(100% - 250px)来解决此问题。
将以下条目添加到CSS：
.content {
transition: transform .5s;
padding: 10px;
width: 100%;
}
.content.visible {
width: calc(100% - 250px)
}当侧边栏打开时，它将.content，250px翻译到右边，迫使它离开屏幕。通过设置上面的属性，您可以使屏幕的总宽度为100% - 250px (即屏幕宽度减去侧边栏的宽度)，因此它不会移出屏幕。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50622980
复制相关文章
相似问题