jquery - 将页面中的 div 转换为模型 div？

Question

我有一个 Angular 元素，我正在其中制作待办事项列表。我正在使用 Masonry directive这样我所有的待办事项便利贴就会在屏幕上顺利排列。它看起来很像 Google Keep。

我正在努力解决的问题是单击砖石网格中的注释并将其作为用于编辑注释内容的模型对话框出现在前面和中间。我想在砖石插件决定将它放在屏幕中央的任何地方为笔记设置动画，同时将其拉伸(stretch)，为用户提供足够的空间来处理笔记。然后，当用户完成后，我想取消拉伸(stretch)笔记并将其放回原来的位置(之后我可以让插件重新排列周围的砖 block ，以防笔记改变大小)。

这是我将注释显示为砖石的方法:

  <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我在玩这个但我无法过渡到屏幕中心而不是捕捉。它还将 Angular 落放在中心。我最终想弄清楚如何将中心置于中心。

.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 以解决回弹问题。