После еще нескольких часов, стуча головой по столу, я решил вернуться и исследовать основы jQuery.
Анимация не запускается, потому что, когда элемент повторно вводится в DOM, этоуже в «законченной» стадии анимации.Поскольку jQuery ничего не делает, он сообщает о себе как о готовом.
Чтобы исправить это, требуется одна строка, чтобы поместить элемент в начальную стадию, требуемую для анимации слайд-шоу jQuery: element.css ('display', 'none');
Исправленный код:
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
vm = this;
vm.divExists = true;
vm.click = function() {
vm.divExists = !vm.divExists;
}
});
app.animation('.yeet', [function() {
return {
enter: function(element, doneFn) {
console.log('entering');
element.css('display', 'none'); // <---- this is all I needed to add
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(400, doneFn);
}
}
}]);
app.animation('.yote', [function() {
return {
enter: function(element, doneFn) {
jQuery(element).slideDown(400, doneFn);
}
}
}])
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script data-require="ngAnimate@*" data-semver="1.4.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<button ng-click="vm.click();">
Click Me
</button>
<div class="yeet" style="background-color:green;" ng-if="vm.divExists">
<h1>This part should slide in and out with button clicks.</h1>
</div>
</body>
</html>