У меня есть задание, в котором мне нужно создать сетку прямоугольников 3х3, где человек может щелкнуть один из этих прямоугольников, и страница увеличит масштаб этого прямоугольника, так что теперь он заполняет экран.
I 'Мы получили это, работая в Angular 6, просто используя их систему анимации и выполняя transform: scale(3)
и translateX
/ translateY
, в зависимости от того, какой из прямоугольников был нажат.Так что никаких проблем нет.(см. рисунок ниже)
Однако мне также необходимо создать 2 или 3 прямоугольника, которые отображаются перед показом сетки.Поэтому, когда пользователь заходит на страницу, он сначала видит 1 прямоугольник, заполняющий экран, нажимает «далее», а затем видит сетку.
По сути, я хочу иметь вид «сверху вниз»моей DOM, возможность масштабировать один из прямоугольников или уменьшить масштаб и увидеть сетку.
Я думал о том, чтобы отказаться от DOM и использовать three.js или pixi.js, но так как я нахожусь на действительно сжатые сроки, я подумал о том, чтобы прийти сюда и спросить у гуру, что вы считаете лучшим.
Итак, каков наилучший способ создать целую связку прямоугольников и иметь возможность увеличивать масштаб?и перемещаться между ними?Большое спасибо заранее!
Пожалуйста, если вам нужна дополнительная информация, оставьте комментарий:)