Question

我有这个Angular项目，我正在做一个待办事项列表。我正在使用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>

由于Material 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;
}

编辑：更新了jsfiddle和CSS以解决快照问题。

将div转换为模型div？

1 个答案: