Компонент CSSTransition - PullRequest
Новая
       23

Компонент CSSTransition

1 голос
/ 19 марта 2020

Я хочу анимировать (постепенно) div в момент или после первоначального подключения компонента. После завершения анимации div не должен исчезать. Я пытаюсь использовать компонент CSSTransition и смотрю примеры на веб-сайте responsecommunity.org, но не смог добиться какой-либо анимации. У меня нет никакого значения, которое приходит откуда-то для in, поэтому я попробовал оба true и false, но ничего не изменилось.

CSS

.example-enter {
  opacity: 0;
}

.example-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.example-exit {
  opacity: 1;
}

.example-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

Реагировать 

<CSSTransition classNames='example' in={false} timeout={200}>
  <div
    className='abc'
    data-description="abc">
    <div className='inner'>
       <div className='head'>A</div>
       <div className='explanation'>A</div>
    </div>
  </div>
</CSSTransition>

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Другой простой способ - использовать CSS анимации. нет необходимости устанавливать дополнительный класс для вашего элемента.

Просто используйте его в CSS коде нужного элемента:

Благодаря animate. css плагин для CSS, посмотрите у него:

https://daneden.github.io/animate.css/

пример: 

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.elem {
  padding: 40px 30px;
  background: #aaa;
  animation: fadeIn 2s;
}
<div class="elem">
  Hello, this is a text
</div>
0 голосов
/ 19 марта 2020

Если вы хотите перейти на первом наборе монтирования appear на true: Переход-опора-появится

Вы можете попробовать это: 

<CSSTransition
    in={true}
    timeout={1000}
    classNames="fade"
    appear={true}
  >
    <div className="box" />
  </CSSTransition>

Css: 

.fade-appear {
  opacity: 0;
  transform: scale(0.2);
}
.fade-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

.box {
  width: 50px;
  height: 50px;
  background: aqua;
}

См. Мой код здесь: https://codesandbox.io/s/csstransition-component-okpue

...