Transition div in page to model div?

Question

I have this Angular project where I'm making a todo list. I'm using a Masonry directive so that all my todo post it notes are arranged smoothly on the screen. It looks a lot like Google Keep.

What I'm struggling with is clicking on a note in the masonry grid and having it come up front and center as a model dialog for editing the note's contents. I want to animate the note from wherever the masonry plugin has decided to put it to the center of the screen while stretching it out giving the user enough space to work with the note. Then when the user is done I want to unstretch the note and place it back where it was (after that I can have the plugin reshuffle the bricks around in case the note changed size).

Here's what I have for displaying a note as a masonry brick:

  <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>

It's a little messy due to the wordiness of Material Design Lite but here's it boiled down to just the DOM elements and important parts:

  <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>

Any of the generated .bring elements are what I'm wanting to animate.

However I'm no good with CSS animations yet and I haven't found a library to do exactly what I want.

I have a fiddle where I'm toying with this but I can't get the transition to move to the center of the screen instead of snap. Also it puts the corner in the center. I was eventually going to figure out how to put the center in the center.

.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;
}

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

I managed to figure out your transition issue thanks to this answer here.

Your element needs an initial position to animate from. And here's a working jsfiddle forked from yours.

Obviously there's still some work to do with the transitions, but this should help set you on the right track.

.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: Updated jsfiddle and CSS to solve the snap back issue.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 11 '15 at 18:03

Robert C.

28
1
5

It seems to transition out to where I tell it but it doesn't transition back. It snaps back. http://jsfiddle.net/u44wogs0/3/ – Corey Ogburn Aug 11 '15 at 18:07
I updated my answer, adding position: absolute to its initial state seems to solve the snap back problem. – Robert C. Aug 11 '15 at 19:16
It does work but I'm not sure if I can make each brick `position: absolute;` and still have it play well with the masonry. I'll look into it and maybe open a whole `nother question. We'll see. – Corey Ogburn Aug 11 '15 at 20:41

Transition div in page to model div?

1 Answers1