Переключение модального значения по щелчку внутри модального - PullRequest
Новая
       15

Переключение модального значения по щелчку внутри модального

0 голосов
/ 07 июля 2019

У меня есть сценарий использования, в котором я переворачиваю одну и ту же модальную карту и показываю несколько разных щелчков по значению в исходной визуализированной модальной карте.Я использовал булму модал и для вращения, CSS переходы.Но при повороте на 180 градусов текст на обратной стороне является зеркальным отражением, но это исправляется, если я использую поворот на 360 градусов.Но 360 градусов не дают ощущения переворачивания.

Есть ли способ получить переворот с 180 градусами и правильно получить текст сзади? 

  

.FetchModal {
  .modal{
    perspective: 1000px;
  }
  .modal-content {
    height: 100%;
    @include from($desktop) {
      width: 90%;
    
    }
    transition: transform 0.8s;
    transform-style: preserve-3d;
    animation-direction:reverse;
  }
  .modalFlip {
    transform: rotateY(-360deg);
  }
 
  
 

}
<div className="FetchModal">
        <div className={classnames("modal is-thin", { "is-active": show })}>
          <div
            className="modal-background"
            onClick={() => this.handleToggle(false)}
          />
          <div
            className={classnames("modal-content", {
              modalFlip: this.state.flipped,
            })}
          >
{this.state.flipped?<div className="box">Fliiped</div>:<div className="box">Click me to flip</div>}
  </div>
          <button
            className="modal-close is-large"
            aria-label="close"
            onClick={() => this.handleToggle(false)}
          />
        </div>
...