AngularJS 和 CSS 过渡答案

【问题标题】：AngularJS and CSS transitionAngularJS 和 CSS 过渡
【发布时间】：2014-04-24 07:28:00
【问题描述】：

我有一个 AngularJS 1.2.9 应用程序。我的任务是在这个元素上引入 CSS 过渡：

<div class="search input container" x-ng-class="{'full screen': initial, 'on top': !initial}">

当课程从“全屏”变为“顶部”时。当我在 Angular 应用程序 (code on JSFiddle) 之外尝试时，CSS 过渡在 Chrome Canary 中运行良好，但在我们的应用程序中不起作用。任何想法为什么当 AngularJS 添加/删除类时转换不起作用？当我从网络检查器手动切换类时，它可以工作。非常感谢任何帮助。谢谢。

附：仅适用于 Chrome Canary ATM，但这对我来说没问题。

【问题讨论】：

您能否详细说明initial 的处理方式？

标签： angularjs css-transitions

【解决方案1】：

已修复。我做了一个小的重构。基本上，我使用一个 CSS 类（“全屏”）来切换 4 个 CSS 类（“全屏”到“顶部”）。我不明白之前的问题是什么以及我的更改如何解决了这个问题。我想了解。

新的html代码是：

<div class="search input container" x-ng-class="{'fullscreen': initial}">

还有更少：

&.input.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 10rem;
  -webkit-transition: height 0.5s;

  &.fullscreen {
    height: 100vh;
  }
}

【讨论】：