Question

我有一个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添加/删除类时，为什么转换不起作用的任何想法？当我从Web检查器手动切换类时，它可以工作。任何帮助非常感谢。谢谢。

P.S。仅适用于Chrome Canary ATM，但对我来说没问题。

Answer 1

固定。我让它做了一个小的重构工作。基本上改为切换4个CSS类（'全屏'到'顶部'）我正在使用一个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;
  }
}

AngularJS和CSS过渡

1 个答案: