Question

我有一个页面，其中包含一个隐藏/显示动画的元素。当元素未显示时页面加载但是，当页面加载时，页面显示隐藏动画我甚至试图将条件更改为ng-show="false"，但是当页面加载时我仍然看到隐藏动画。
我知道有关angularjs的旧问题，但我使用1.2 0.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
}

Answer 1

你应该加入你的CSS：

.c_redDiv{
    display:none;
}


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

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

使用angularjs加载页面上的不需要的动画

2 个答案: