Почему не срабатывает задержка анимации JQ в директиве angularJS

Question

const app = angular.module('app', []);
app.directive('ani', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      $(document).ready(function() {
        if (element) {
          element.css({
            height: '150px'
          })
          element.animate({
            height: '50px'
          }, {
            duration: 500
          }).delay(5000);
        } else {
          element.css({
            height: 'auto'
          })
        }
      });
    }
  }
});

header {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="app">
  <header ani>Header</header>
</body>

Без angularJS

$(document).ready(function() {
  let element = $('header');
  element.css({
    height: '150px'
  })
  element.animate({
    height: '50px'
  }, {
    duration: 500
  }).delay(5000);
});

header {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header ani>Header</header>

Answer 1

Не туда вставил .delay(5000)

$(document).ready(function() {
  let element = $('header');
  element.css({
    height: '150px'
  }).delay(5000)
  element.animate({
    height: '50px'
  }, {
    duration: 500
  })
});

header {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header ani>Header</header>

БЛОГ НА HUSL

Почему не срабатывает задержка анимации JQ в директиве angularJS

Ответы (1 шт):