Сделаем анимацию переворачивания карточки На первом шаге проведем некоторую подготовку. Во-первых, задняя часть карты (.face.back) должна быть развернута на 180 градусов вокруг оси Y Во-вторых, у каждой стороны (.back и ....
Переворот карточки у нас будет с хитростью. Если мы ее просто повернем, то она будет немного как бы вылазить наперед. Что бы это избежать, надо у элемента card сместить центр перспективы вправо....
Ты наверняка смотрел фильмы Star Wars. Помнишь, в начале каждого фильма идут титры с предысторией? Сейчас попробуем сделать такую анимацию для первого эпизода. Первым делом подготовим разметку нашей страницы. Внутри body добавим div с классом star-wars, внутри него - один div с классом episode-intro....
Теперь добавим странице стилей. Тег body должен занимать весь экран устройства, а все что выходит за body - должно быть скрыто. Единственную картинку из папки images используй для заднего фона body...
Финальные штрихи и анимация. Добавь элементу div.episode-intro относительное позиционирование. Это позволит сдвигать нам его относительно начального положения. И сразу спрячем наш текст - добавь свойство top со значением 100%. Таким образом блок будет спрятан и до, и после анимации....
Создай свое первое React Native приложение с помощью Expo. Приложение должно называться my_app. Ничего не изменяй в файлах созданого приложения - просто отправь его на проверку. Эта задача — часть курса по Full-Stack JavaScript...
Открой файл App.js. Там есть элемент Text. Измени внутренний текст этого документа на My first React Native try. Эта задача — часть курса по Full-Stack JavaScript Ты можешь задать свой вопрос в комментариях под постом...
Добавь еще два круга в строчку. Они должны быть стилизованы точно так же, как и первые два. Эта задача — часть курса по Full-Stack JavaScript Ты можешь задать свой вопрос в комментариях под постом...
В файле App.js компонент должен возвращать колонку из трех блоков. Колонка должна занимать весь экран - свойство flex равно 1. Первый блок колонки с синим фоном (blue), второй - зеленым (green), третий - желтым (yellow)....
Потренируемся немного со стилями в React Native. Элементы внутри каждого элемента styles.row должны располагаться не в колонку, а в строчку. Все ячейки календаря должны быть одинаковыми по размеру с полями 5px и отступами 10px....