Question

我目前正在构建一个Angular / Firebase应用程序，允许教师将问题提交给多个学生，然后在一个屏幕上收集学生的答案进行预测。（我没有实时版本，但文件在Github上是here。每个学生都得到一个小div，其中记录了他们的答案，div自动组织和调整自己的大小。实际数据位于Firebase中的参与者对象中，并作为$ scope.participants：

绑定到模型

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

...并且显示部分是由ng-repeat填充的容器div，其中有一个按钮，用于调用函数以将“缩放”类添加（或删除）到单击其按钮的特定div：< / p>

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

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

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

1 个答案: