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

我目前正在开发一个Angular/Firebase应用程序，允许教师将一个问题推给多个学生，然后将学生的答案收集到一个屏幕上进行投影。（我没有实时版本，但文件在Github上）。每个学生都会得到一个小div，记录他们的答案，div会自动组织并调整大小。实际数据位于Firebase中的参与者对象中，作为$scope绑定到模型。参与者：

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

。。。显示部分是一个容器div，由ng repeat填充，带有一个按钮，该按钮将调用一个函数，向单击其按钮的特定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互换位置，我想让它一个人呆着，然后创建一个绝对位于它上面的副本，然后进行缩放，但我的大脑无法围绕它。如果可能的话，我想用Angular和CSS来实现这一点

---

任何想法都是受欢迎的，包括“你的整个方法都是错误的；重新构造东西。”我只有大约六个月的自学编码经验，所以我几乎肯定会犯错误。

不应该有：在类名之后。 如果希望在悬停时获得所需的动画，则应

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

---

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

你考虑过使用angular bootstrap的手风琴吗？谷歌它的一个快速演示。这样可以显示摘要，但当老师选择一个学生div时，它会完全展开。@third foundation是正确的“缩放”类还是没有冒号的“缩放”类？另外，您提供的代码似乎没有出现在github中的项目中。感谢您捕获冒号输入错误。我不希望在悬停时实现动画，而是在单击时实现动画。然而，问题在于动画本身。。。上面提到的“跳过”。

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