html - 使用angularjs在页面加载时不需要的动画

Question

我有一个页面，其中有一个元素在隐藏/显示时有动画。当元素未显示时页面加载，但当页面加载时它仍然显示隐藏动画。
我什至尝试将条件更改为 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
}

Answer 1

你应该添加到你的CSS:

.c_redDiv{
    display:none;
}


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