Значимые переходы Material design для интернета

(Извините, я не могу предоставить любой код, что я прошу, потому что я действительно не знаю, с чего начать.)

о Осмысленные Переходы пункт в руководящих принципах проектирования материалов.

Я очень заинтересован в создании такого плавного перехода внутри моего веб-приложения ( особенно тот, где изображение профиля переходит от деятельности к другой), но интересно, как это сделать с помощью html?

  • - это с помощью CSS3 переход достаточно для этого (какой стиль-свойство должен я использовать для перемещения элемента прямо)?
  • должен ли я использовать JS/Dart для перемещения "общего элемента представления" с помощью странной системы координат?
  • может ли он работать на динамической / прокрутки макета или я должен забыть об этом?
  • есть ли какие-либо советы для визуального перемещения узла из контейнера в другой при плавном переходе?

в двух словах, HTML готов к таким вещам (любым код / документация будут оценены)? Может, подождем полимерных инструментов? Или мы просто не должны делать это в интернете?

6
css dart dart-polymer material-design polymer

3 ответов

Проверьте полимерный элемент core-animated-pages https://elements.polymer-project.org/elements/neon-animation

у них есть отличные демонстрации, которые очень похожи на значимые переходы https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages

демонстрация "Icon to top bar", вероятно, наиболее похожа на ту, на которую вы ссылались (вы можете просто просмотреть источник см. используемые полимерные веб-компоненты вместе с необходимыми 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>
7

полимер ничего из этого не делает. Это все просто HTML + CSS + JavaScript. И вы можете сделать все это без полимера.

все полимерные делает, это позволяет инкапсулировать эти вещи в пользовательский элемент.

ядро-элементы и бумага-элементы некоторые примеры. Вы можете создавать такие элементы самостоятельно или клонировать и изменять/расширять их.

5

насколько я знаю, полимера должен быть в состоянии сделать все это. Если еще нет, то скоро сможет.

основная идея polymer заключается в том, чтобы позволить вам сделать последовательные интерфейсы на всех устройствах (веб, компьютер, android). Поэтому, если Android L может делать эти переходы, то они, безусловно, означают, что полимер также имеет эту возможность.

2