transitionX убирает текст с экрана - PullRequest
Новая
       10

transitionX убирает текст с экрана

0 голосов
/ 31 мая 2018

У меня есть боковое меню и страница контента.Когда боковое меню видно, оно «перемещает» весь контент вправо.Но часть содержимого, которая уже находилась справа от страницы, удаляется от экрана (я хочу, чтобы она работала так же, как если бы ширина контейнера уменьшалась)

Рабочий пример: 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>

1 Ответ

0 голосов
/ 31 мая 2018

Это можно исправить, установив ширину .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 (т. Е. Ширина экрана минус ширина боковой панели), следовательно, она не вышла изэкран.

...