Строительство флиппера с помощью React JS и менее CSS

Автор оригинала: Chris Harrington.

Сегодня я собираюсь объяснить, как создать листовую плитку с помощью анимации CSS3 и реагировать JS. Если вы никогда не использовали React JS, вы пропускаете. Вы можете проверить это здесь Отказ Я собираюсь использовать меньше CSS для некоторых более продвинутых CSS, поскольку позволяет нам полностью игнорировать префиксы поставщиков посредством использования меньшего количества смеси. Если вы никогда не использовали меньше CSS, я предлагаю вам прочитать на нем здесь Отказ Это определенно стоит подобрать препроцессор CSS, даже если он не меньше.

Я собираюсь сломать статью на два раздела: раздел Рейкт, в котором обсудим то, что каждый из различных классов делает и несет ответственность за; И чем меньше секция CSS, где я пойду на каждый из различных классов CSS и как они анимируют флиппер.

Реагировать

Есть четыре класса, которые я пойду через: Приложение , Флиппер , Спереди и Назад Отказ

Приложение

var App = React.createClass({
  getInitialState: function() {
    return {
      flipped: false
    };
  },

  flip: function() {
    this.setState({ flipped: !this.state.flipped });
  },

  render: function() {
    return 
      
      
            
      
        
      
    ;
  }
});

Приложение Класс несет ответственность за оказание большей части приложения, включая различные пример Ласты и кнопка, используемая для запуска анимации Flip.

Получающийся стадь Метод устанавливает Приложение состояние, так что плитки не перевернуты по умолчанию. Флип Метод инвертирует отклоненную государственную собственность и оказывать Метод на самом деле рисует приложение. В нем мы редаем два Ласты : Один, чтобы перевернуть горизонтально, а другой, чтобы перевернуть вертикально. Есть также кнопка, которая используется для запуска анимации Flip.

Флиппер

var Flipper = React.createClass({
  render: function() {
    return 
      
        the front!
        the back!
      
    ;
  }
});

Флиппер Класс несет ответственность за рисование различных Divs и устанавливает каждый из классов, используемых в анимации, чтобы перевернуть спереди назад. Вы увидите в оказывать Способ того, что есть еще два класса, ссылаются: Спереди и Назад Отказ Эти классы содержат то, что показано на передней части плитки в неразлысленном состоянии, а что на задней панели, который отображается, когда плитка перевернута.

Спереди и сзади

var Front = React.createClass({
  render: function() {
    return {this.props.children};
  }
});
      
var Back = React.createClass({
  render: function() {
    return {this.props.children};
  }
});

Спереди и Назад Классы несут ответственность за отображение соответствующего контента на основе переброшенного состояния родителя Флиппер класс. Две классы практически идентичны, при этом только одно классное имя, разделяющее два, но я чувствовал, что их следует отделить ради чтения.

дети PROP – это специальный принцип, который содержит дочернее содержание класса. Когда мы редаем каждый из классов в Флиппер Класс выше, вы увидите содержание для двух классов, чтобы быть «фронтом!» И «спина!», соответственно. Этот контент размещен в детских опорах, которые мы редаем в каждом из классов плитки рендеринга методов.

CSS.

.flipper-container {
  float:left;
  width:250px;
  height:250px;
  margin-right:15px;
  display:block; .perspective;
        
  span {
    color:white;
  }
  
  >div.flipper {
    float:left;
    width:100%;
    height:100%;
    position:relative;
    .transform-style(preserve-3d);

    .front, .back {
      float:left;
      display:block;	
      width:100%;
      height:100%;
      .backface-visibility-hidden;
      position:absolute;
      top:0;
      left:0;
      .transform-style(preserve-3d);
      .transition(-webkit-transform ease 500ms);
      .transition(transform ease 500ms);
    }
          
    .front {
      z-index:2;
      background:#19489E;
              
      /* front tile styles go here! */
    }
          
    .back {
      background:#9E1919;
      
      /* back tile styles go here! */
    }
  }
}
      
.flipper-container.horizontal {
  .front { .transform(rotateY(0deg)); }
  .back { .transform(rotateY(-180deg)); }
        
  div.flipper.flipped {
    .front { .transform(rotateY(180deg)); }
    .back { .transform(rotateY(0deg)); }
  }
}
      
.flipper-container.vertical {
  .front { .transform(rotateX(0deg)); }
  .back { .transform(rotateX(-180deg)); }
        
  div.flipper.flipped {
    .front { .transform(rotateX(180deg)); }
    .back { .transform(rotateX(0deg)); }
  }
}

Я покинул кучу правил CSS, специфичных поставщикам для краткости. Демо Страница имеет полные правила CSS, чтобы сделать флиппер работать во всех браузерах, поэтому, если вам нужно их увидеть, проверьте это.

Есть пара причудливых правил CSS здесь. Я пойду через них все и описываю, что они делают.

Стиль трансформации Правило в стиле преобразования неудивительно указывает стиль для преобразования. В этом примере нас интересуют только значение PROSERV-3D, что указывает на то, что любые вложенные элементы должны сохранить свой стиль рендеринга в третьем измерении. Это ничего не значит без правила преобразования CSS, которое мы также используем. Это то, что дает иллюзию переворачивания плитки. Без этого плитка, по-видимому, уменьшается и растут вместо того, чтобы листать 3D.
Перспектива Это определяет, где ориентация и расстояние зрителя имеет трехмерную трансформацию. Это звучит немного странно, но в основном он определяет количество пикселей.
Backface-Visibility Это свойство указывает на состояние видимости обратной стороны элементов. Это не имеет смысла для статических элементов на странице, но в нашем случае важно скрывать обратную сторону, поэтому мы не видим перевернутую версию плитки. В нашем примере текст «фронт!» печатается как на передней, так и на задней части плитки. Если мы установим это свойство для скрытой, только передняя сторона видима.

Заключение

Вот и все! Спасибо за прочтение. Еще раз, если вы хотите просмотреть эти флип-плитки в действии, вы можете взглянуть на демо-страницу здесь Отказ