使用 angularjs 加载页面时不需要的动画答案

【问题标题】：Unwanted animation on page load with angularjs使用 angularjs 加载页面时不需要的动画
【发布时间】：2014-02-04 14:06:59
【问题描述】：

我有一个包含隐藏/显示动画元素的页面。页面在元素未显示时加载，但仍然在页面加载时显示隐藏动画。
我什至尝试将条件更改为ng-show="false"，但我仍然在页面加载时看到隐藏动画。
我知道 angularjs 存在一个老问题，但我使用的是 1.2.2。

HTML：

<div class="c_redDiv" ng-show="state == true">
            <div ...>
                <button ...>
                    <div ... />
                </button>
                <button ...>
                    <div ... />
                </button>
            </div>
        </div>

CSS：

.c_redDiv.ng-hide-add, .c_redDiv.ng-hide-remove {
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
    display: block !important;
}

.c_redDiv.ng-hide-add.ng-hide-add-active,
.c_redDiv.ng-hide-remove {
    opacity: 1;
    top: -50px;
}

.c_redDiv.ng-hide-add,
.c_redDiv.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
    top: 0px
}

【问题讨论】：

你解决过这个问题吗？我对 1.2.23 有同样的问题
不，我很抱歉，但我目前没有处理它。

标签： html angularjs css-animations

【解决方案1】：

你应该添加到你的CSS：

.c_redDiv{
    display:none;
}


.c_redDiv.ng-show{
    display:block;
}

【讨论】：

【解决方案2】：

当使用ng-hide 或ng-show 时，我无法找到避免初始动画触发的方法，但能够使其与ng-if 一起使用。

HTML:

<div class="c_redDiv" ng-if="state == true">
 ...
</div>

SASS：

.c_redDiv {
  overflow: hidden;
  transition: max-height 0.35s ease;

  &.ng-leave, &.ng-enter.ng-enter-active {
    max-height: 300px;
  }
  &.ng-leave.ng-leave-active, &.ng-enter {
    max-height: 0;
  }
}

【讨论】：