#css #dart #polymer #dart-polymer #material-design
#css #dart #полимер #дротик-полимер #material-design #dart-полимер
Вопрос:
(Извините, я не могу предоставить какой-либо код того, что я прошу, потому что я действительно не знаю, с чего начать.)
О значимых переходах говорится в руководстве по дизайну материалов.
Я очень заинтересован в создании такого плавного перехода внутри моих веб-приложений (особенно того, где изображение профиля переходит от действия к другому), но мне интересно, как это сделать с помощью html?
- Достаточно ли для этого перехода CSS3 (какое свойство стиля я должен использовать для простого перемещения элемента)?
- Должен ли я использовать JS / Dart для перемещения «элемента общего просмотра», используя странную систему координат?
- Может ли это работать на динамическом / прокручиваемом макете или я должен забыть об этом?
- Есть ли какие-либо советы по визуальному перемещению узла из контейнера в другой при плавном переходе?
В двух словах, готов ли HTML к такому материалу (любой код / документация будут оценены)? Должны ли мы ждать, пока некоторые инструменты polymer сделают это? Или мы просто не должны делать это в Web?
Ответ №1:
Ознакомьтесь с элементом Полимерное ядро-анимированные страницыhttps://elements.polymer-project.org/elements/neon-animation
У них есть несколько отличных демо, которые очень похожи на значимые переходы https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.htmlamp;active=neon-animated-pages
Демонстрация «Значок на верхней панели», вероятно, наиболее похожа на ту, на которую вы ссылались (вы можете просто просмотреть исходный код, чтобы увидеть используемые веб-компоненты Polymer, а также необходимые CSS и JS
Вы можете импортировать в свой проект через Bower:
bower install Polymer/core-animated-pages
И оберните ваши элементы с помощью атрибута и определите переходы с помощью такого атрибута, как
Вот код для этого примера перекрестного затухания:
<style>
#hero1 {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: orange;
}
#hero2 {
position: absolute;
top: 200px;
left: 300px;
width: 300px;
height: 300px;
background-color: orange;
}
#bottom1, #bottom2 {
position: absolute;
bottom: 0;
top: 0;
left: 0;
height: 50px;
}
#bottom1 {
background-color: blue;
}
#bottom2 {
background-color: green;
}
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
<section id="page1">
<div id="hero1" hero-id="hero" hero></div>
<div id="bottom1" cross-fade></div>
</section>
<section id="page2">
<div id="hero2" hero-id="hero" hero></div>
<div id="bottom2" cross-fade></div>
</section>
</core-animated-pages>
Комментарии:
1. Возможно, вы захотите добавить некоторые ключевые данные из ваших ссылок, поскольку ответы только для ссылок могут стать неактуальными, если страницы, которые они пересылают, по какой-либо причине перейдут в автономный режим.
2. Потрясающе, это именно то, что я искал! Спасибо! 🙂
3. очень приветствую, мне пришлось некоторое время поохотиться за этим, и я люблю экспериментировать с основными анимированными страницами
Ответ №2:
Полимер не делает ничего из этого. Это все просто HTML CSS JavaScript. И вы можете сделать все это без Полимера.
Все, что делает Polymer, это позволяет вам инкапсулировать эти вещи в пользовательский элемент.
Основные элементы и бумажные элементы — вот несколько примеров. Вы можете создавать такие элементы самостоятельно или клонировать и изменять / расширять их.
Комментарии:
1. 1 @Vloz: с помощью Chrome dev tools вы можете увидеть css для анимации и активировать «Показать пользовательский агент shadow DOM», чтобы просмотреть элемент polymer
Ответ №3:
Насколько я знаю, предполагается, что polymer способен делать все это. Если еще нет, то скоро появится возможность.
Основная идея polymer заключается в том, чтобы позволить вам создавать согласованные интерфейсы на всех устройствах (Веб, компьютер, Android). Итак, если Android L может выполнять эти переходы, то они, безусловно, означают, что у polymer также есть такая возможность.