javascript - 当您除了过渡状态之外还预定义了 css 状态时，Angular 动画无法正常运行

Question

考虑以下 css

            /* starting animations */
            .error-animation.ng-enter {

                -webkit-transition: 0.5s linear all;
                transition: 0.5s linear all;

                opacity: 0;
            }

            /* destination animations */
            .error-animation.ng-enter.ng-enter-active {
                opacity: 0.7;
            }


            #my-error {
                color: red;
                margin-left: 10px;
                margin-top: 10px;
                opacity: 0.7
            }

如果我的 html 元素包含具有相同功能的动画类和自定义 id。转换不适用于该功能。

            <div id="my-error" 
                 ng-if="error" ng-cloak class="error-animation">
                Error
            </div>

在上面的代码中，导致问题的特征是opacity

我的ng-enter 状态有opacity: 0

我的 ng-enter-active 状态有 opacity: 0.7

我的默认状态有 opacity: 0.7

因为默认状态比 ng-animate 类更具体，它会覆盖它(动画不会工作)。

但是问题在于，即使我在默认状态下去掉了 opacity:0.7，它也会假定默认不透明度为 1 并首先从 过渡0 到 0.7 和 0.7 到 1。

有人可以给我一些解决这个问题的见解吗？

这是一个简单的例子with

Answer 1

如果元素本身定义了一个默认的不透明度，你想使用它吗？或者您是否希望错误动画的不透明度始终优先？

可以在动画隐藏状态添加!important:

.fade-in-out.ng-hide {
  opacity: 0 !important;
}

然后您将获得以下行为。

• 如果元素没有定义不透明度，它将在 0 到 0.7 和 0.7 到 0 之间进行动画处理。
• 如果元素定义了例如 0.4 的不透明度，它将在 0 到 0.4 和 0.4 到 0 之间进行动画处理。

如果在动画显示状态中也添加 !important，元素自身的不透明度将被忽略，0.7 将始终优先:

.fade-in-out {
  transition: 1s linear all;
  opacity: 0.7 !important;
}