Создание мобильного приложения на Meteor.js. Часть 12/15 — Знакомство с animate.css

Автор Lyubov Stishevskaya
Создание мобильного приложения на Meteor.js. Часть 12/15 — Знакомство с animate.css

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

Я хочу сделать картинку во всю ширину карточки и для того чтобы — это сделать. Я перехожу на сайт материалы sis.com в компонентах хочу подобрать подходящий шаблон карточки карта с изображением в принципе — это то, что нужно я копирую. Исходный код и хожу к файлу 1С листочков там где начинается цикл я оставляю.

Исходный код карточки копирую вставку данных.

Аватара копирую ставку заголовка нет заголовок я уберу вообще заголовком карточки сделаю так же заголовок H5 и. Вставляю его содержимое карточки после чего я скопирую текст. Да в принципе наверное можно всё сразу всё, что находится внутри ссылки ведущие на страницу статистики скопировать и вставить внутрь содержимого карточки удалив. Аватар и заменить кнопку тату, что нужно мне отлично после чего старый шаблон я могу удалить и посмотреть, что получится шикарно. Это то, что я хотел получить есть одна проблема, что нарушилась выравнивание. Я акцентирую всё по центру добавив в соответствующей класс. Где вы с классом Card Content Central line и тот же самый класс я добавлю в div с классом. Кортексин теперь и кнопка выровнялась ровно по центру и следующим этапом. Я хочу добавить небольшую анимацию при прокрутке не для того чтобы, что я хочу её увидеть как — это работает. Мне необходимо заполнить большим количеством благодетеля и приложения у меня уже есть кот init db Data он заполняет базу тестовыми благодетеля me, но он — это делает без добавления картинок благодетелем поэтому я скопирую код генерации название файла картинки из файла Input form. псы видеофайл main.cf внутрь цикл я добавлю. Этот кот и также добавлю атрибут. Аватар для документа который вставляется в новую коллекцию и вызову отлично превосходно выглядит список сейчас я хочу сделать так чтобы при прокрутке благодетели появлялись плавно. После этого я воспользуюсь набором CSS классов для анимации набор CSS классов называется аниме.. СССР и всё, что нужно сделать скачать файл animate.css и файлы открываются в виде текста я его копирую и перехожу в майонез всё содержимое. Вставляю туда и так теперь нужно понять какую анимацию. Я хочу здесь их очень много, но я думаю я воспользуюсь в один. Мне нравится просто появление в принципе тут их колоссальное количество — это различные движения. Тони появления и не мотаться исчезновение тоже есть можно подобрать всё, что нравится для того чтобы — это использовать в своем проекте необходимо просто добавить класс перейду на гитхаб посмотри может быть есть какой-то описание если бы мы использовали animate.css. НАСА или где-то еще нам бы пришлось бы подключить его внутри. Хеда, но так как метеор автоматически соединяет все файлы воедино ничего подключать на неё всё, что нужно — это использовать название нужного класса попробую и так я выбрал файден. И сейчас я хочу в. Гродно с list.am у самого главного. Дива с классом добавить класс fade in тем не менее — это не сработало поэтому повнимательней изучу страницу гитхаба до необходимо ещё добавить класс анимейтед сохраняю и смотрю вот всё появляется плавника также я добавлю анимацию на страницу статистики скопирую название классов и перейду в годность details HTML и также добавлю эти классы к одному из родительских дивов всё сработало и пожалуй и то же самое сделаю на форме добавления добродетели для того чтобы вся форма появлялась. Я сначала оперная. Дива чтобы применить эффект именно ко всей страницы они какой-то её части. Отлично всё работает сейчас изображение не является ссылкой на страницу статистики. И я хочу — это исправить я перехожу в 1С HTML и копирую текст ссылки и оборачиваем картинку добавляю закрывающий тег и вырезаю классы меняющие цвет шрифта так как здесь его нету теперь картинка тоже стало ссылкой на страницу статистики. Здорово последняя, что я хотел бы сделать перед тем как выложить приложение в Google Play и Apple Store — это добавить. Нина backgrounder на страницах следующим шагом. Я хочу немножко изменить форму добавления благодетели думаю. Вот этот текст следует опустить ниже самой форма потому, что его прочитать следует всего лишь один раз я перехожу File Input в форму HTML и вырезаю текст и. Вставляю его. После кнопки добавить смотрю, что получилось. Получилось плохо заношу его внутрь. Дива с кнопкой. В принципе неплохо, но необходимо тексту добавить класс liftline который выравнивает его левому краю в качестве вспомогательного текста он уже неплохо будет работать, но хочется немножко понизить его контракту контрастность поэтому я изменю цвет или на сайт материала из ss.com под цвет и как обычно просто копирую необходимые классы добавляю первого из них постфикс текст оу 2 prefixes текста после чего поясняющий текст становится мини контрастным и не особо привлекает внимание. Мне по-прежнему не нравится как этот текст выглядит поэтому. Пожалуй я его вынесу на главную страницу и показывать буду в момент когда добродетелей совсем нет то есть — это ситуация когда человек входит в приложении первый раз ещё не создал никаких добродетелей всё, что нужно сделать чтобы этот текст показывался вместо списка — это добавить в словно оператор If с проверкой результаты возвращаемого хелпером годность лист. А вообще.

0 комментариев
0

Читайте также