Переход на страницу для модели div?

Question

У меня есть этот Угловой проект, где я делаю список дел. Я использую Masonry directive, так что все мои сообщения о том, что он делает заметки, плавно размещаются на экране. Он очень похож на Google Keep.

То, с чем я борюсь, - это щелчок на заметке в сетке кладки и ее появление спереди и в центре в качестве диалогового окна модели для редактирования содержимого заметки. Я хочу анимировать заметку, откуда плагин масонства решил поместить его в центр экрана, растягивая его, предоставляя пользователю достаточно места для работы с запиской. Затем, когда пользователь закончен, я хочу размять записку и поместить ее туда, где она была (после этого я могу заставить плагин перетаскивать кирпичи вокруг в случае изменения размера заметки).

Вот что у меня есть для отображения заметки в виде кладки кирпича:

<div masonry='{ "transitionDuration" : "0.2s" , "itemSelector" : ".brick", "isFitWidth": true}' class="center-x"> 
    <div ng-repeat="note in Todo.GetNotes()" class="brick"> 
     <div class="mdl-card mdl-shadow--4dp demo-card-event" ng-class="[note.Color, {done: note.Done}]"> 
     <div class="mdl-card__title mdl-card--expand"> 
      <h4> 
      {{ note.Content }} 
      </h4> 
     </div> 
     <div class="mdl-card__menu"> 
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" ng-class="{'done-check': !note.Done}" ng-click="Todo.toggleDone(note)"> 
      <i class="material-icons">done</i> 
      </button> 
     </div> 
     </div> 
    </div> 
    </div> 

Это немного неаккуратно из-за многословие Материальной Design Lite, но вот оно сводилось к только элементам DOM и важные части:

<div masonry='{ "itemSelector" : ".brick" }'> 
    <div ng-repeat="note in Todo.MyNotesArray" class="brick"> 
     <div> 
     <div> 
      <h4> 
      {{ note.Content }} 
      </h4> 
     </div> 
     <div> 
      <button ng-click="Todo.toggleDone(note)"> 
      <i class="material-icons">done</i> 
      </button> 
     </div> 
     </div> 
    </div> 
    </div> 

Любой из порожденных .bring элементов, что я хотел, чтобы оживить.

Однако я пока не умею с анимацией CSS, и я не нашел библиотеку, чтобы делать именно то, что я хочу.

I have a fiddle где я играю с этим, но я не могу получить переход, чтобы перейти в центр экрана вместо привязки. Также он ставит угол в центре. В конце концов я собирался выяснить, как разместить центр в центре.

.brick { 
    height: 100px; 
    width: 100px; 
    background-color: red; 
    transition: all 1s; 
} 

.modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 300px; 
    transition: all 1s; 
    z-index: 10; 
} 

Answer 1

мне удалось выяснить ваши перехода выпуск благодаря this answer here.

Ваш элемент нуждается в исходную позицию для анимации из. And here's a working jsfiddle forked from yours.

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

.brick { 
    height: 100px; 
    width: 100px; 
    background-color: red; 
    transition: all 1s; 
    top: 0; 
    left: 0; 
    position: absolute; 
} 

.modal { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 200px; 
    height: 300px; 
    z-index: 10; 
} 

EDIT: Обновлен jsfiddle и CSS для решения проблемы с обратной связью.