Question

我试图在点击按钮时产生效果，按钮淡出并在同一个地方加载动画淡入，但我无法设法在完全隐藏按钮后显示加载动画

在HTML中我有：

<div class="form-group">
   <button ng-hide="login.sendingAjax" type="submit" id="loginButton" class="form-control btn btn-primary uppercase">INGRESAR</button>
   <loader ng-if="login.sendingAjax" ng-show="login.sendingAjax" class="loaderContainer"></loader>
</div>

然后在我的控制器中，我提供了表单被提交时的函数，在那一刻我将login.sendingAjax变量设置为true，以便隐藏按钮并显示动画，并在结束调用时使用失败我把login.sendingAjax变量放回false：

    vm.loginError = false;
    vm.sendingAjax = false;

    /**
     * Submit the form and check if login was ok
     */
    vm.loginUser = function() {
      vm.loginError = false;
      vm.sendingAjax = true;
      vm.alert = {};

      authService.login(vm.formData).then(function () {
        $location.path('/ubicaciones');
      },
      function () {
        vm.alert = {type: 'danger', msg: 'Hola'};
        vm.sendingAjax = false;
        vm.loginError = true;
      });
    };

CSS是：

.ng-hide-add         { animation:0.5s hideObjectOpacity ease; }

/* when showing the picture */
.ng-hide-remove      { animation:0.5s flipInX ease; }

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    transform: perspective(400px);
    transform: perspective(400px);
    transform: perspective(400px);
  }
}

/* light speed out */
@keyframes hideObjectOpacity {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

Answer 1

有两种方法可以解决这个问题。一个是在不使用ng-hide和ng-show的情况下，您可以使用JS内部的函数（使用VelocityJS或......之类的模块）执行淡出动画，并在其中使用回调，淡入其他元素（默认情况下该元素应为display:none，动画应在其进度中更改显示属性）。

或者您必须对ng-hide和ng-show使用不同的切换，并在第一个函数的回调中使用ng-show切换为true或使用$timeout ...

你也可以通过操纵css动画的前几步来伪造入口的延迟，然后将opacity设置为0，直到第一个元素完全消失......但是我不认为这是一种正确的做法。（考虑到你的布局可能会改变，因为那里仍然存在opacity:0的元素！）

告诉我你是否需要一个例子来更好地理解它

使用ng-show / ng-hide

1 个答案: