css - 单击以缩放使用 ng-repeat 创建的 div

Question

我目前正在构建一个 Angular/Firebase 应用程序，该应用程序允许教师向多个学生推送一个问题，然后将学生的答案收集到一个屏幕上进行投影。 (我没有实时版本，但 Github 上的文件是 here)。每个学生都会得到一个小 div，其中记录了他们的答案，div 会自动组织和调整自己的大小。实际数据在 Firebase 的参与者对象中，作为 $scope.participants 绑定(bind)到模型:

participants: {
  Joe:  { response: "Joe's answer"  },
  Sam:  { response: "Sam's answer"  },
  Fred: { response: "Fred's answer" }
}

...显示部分是一个由 ng-repeat 填充的容器 div，带有一个按钮，该按钮将调用一个函数以将“缩放”类添加(或删除)到其按钮被单击的特定 div:

<div ng-repeat="(key, val) in participants" ng-class="{zoomed: zoomIndex==={{$index}} }">
  <span>{{key}}</span>
  <span>{{val.response}}</span>
  <button ng-click="zoom($index)">Click to zoom</button>
</div>

zoom = function(val) {
  if ($scope.zoomIndex !== val) {
    $scope.zoomIndex = val;
  } else {
    $scope.zoomIndex = 999;
  }
}

问题:

我无法获得任何合理的缩放动画。目标是让所选的 div 从多选之一变为填充窗口。我尝试添加绝对定位并提高 z-index，但是当它从队列中弹出并跳到左上角，然后慢慢增长时，会立即发生跳跃。我试着把它留在原地，只是让它膨胀以将其他东西推开，但那里也有一个跳跃，如果它不是排在第一位的话……它会长大并将其他所有东西推离它的线，并且然后当它太大而无法容纳剩余空间时，它会跳到下面的行。

zoomed {
  height: 97%;
  width: 97%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}

我想过随着它的增长让它向左滑动，但我想不出如何让它与其他 div 交换位置，我想过不要管它并创建一个绝对位于右侧的副本最重要的是，它会缩放，但我无法全神贯注。如果可能的话，我想只用 Angular 和 CSS 来完成。

欢迎提出任何想法，包括“您的整个方法是错误的；重组事物。”我只有大约六个月的自学编码经验，所以我几乎肯定会犯错误。

Answer 1

类名后不应该有 : 。如果你想在悬停时实现所需的动画，那么它应该是

zoomed:hover {
  height: 97%;
  width: 97%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}

一旦该元素被悬停，上面的动画就会被应用