AngularJS ngAnimate works for ng-leave but not for ng-enter
0
Recently I've been getting the hang of using AngularJS with CSS animations and that seems to work fine and dandy. I'm trying to incorporate jQuery to run the animations and have run into some problems.
The exit animation works fine but the enter doesn't. It does fire off the message in the console, but the animation itself fails to run. What am I doing wrong here?
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');
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(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>jquery angularjs
edited Jan 5 at 22:58
anothermh
3,27831632
asked Nov 14 '18 at 2:18
SkycapSkycap
11
add a comment |
0
Recently I've been getting the hang of using AngularJS with CSS animations and that seems to work fine and dandy. I'm trying to incorporate jQuery to run the animations and have run into some problems.
The exit animation works fine but the enter doesn't. It does fire off the message in the console, but the animation itself fails to run. What am I doing wrong here?
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');
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(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>jquery angularjs
edited Jan 5 at 22:58
anothermh
3,27831632
asked Nov 14 '18 at 2:18
SkycapSkycap
11
add a comment |
0
0
0
Recently I've been getting the hang of using AngularJS with CSS animations and that seems to work fine and dandy. I'm trying to incorporate jQuery to run the animations and have run into some problems.
The exit animation works fine but the enter doesn't. It does fire off the message in the console, but the animation itself fails to run. What am I doing wrong here?
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');
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(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>jquery angularjs
edited Jan 5 at 22:58
anothermh
3,27831632
asked Nov 14 '18 at 2:18
SkycapSkycap
11
Recently I've been getting the hang of using AngularJS with CSS animations and that seems to work fine and dandy. I'm trying to incorporate jQuery to run the animations and have run into some problems.
The exit animation works fine but the enter doesn't. It does fire off the message in the console, but the animation itself fails to run. What am I doing wrong here?
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');
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(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>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');
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(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>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');
jQuery(element).slideDown(400, doneFn);
},
leave: function(element, doneFn) {
console.log('exiting');
jQuery(element).slideUp(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>jquery angularjs
jquery angularjs
edited Jan 5 at 22:58
anothermh
3,27831632
asked Nov 14 '18 at 2:18
SkycapSkycap
11
edited Jan 5 at 22:58
anothermh
3,27831632
asked Nov 14 '18 at 2:18
SkycapSkycap
11
edited Jan 5 at 22:58
anothermh
3,27831632
edited Jan 5 at 22:58
anothermh
3,27831632
edited Jan 5 at 22:58
anothermh
3,27831632
3,27831632
asked Nov 14 '18 at 2:18
SkycapSkycap
11
asked Nov 14 '18 at 2:18
SkycapSkycap
11
asked Nov 14 '18 at 2:18
SkycapSkycap
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
After several more hours of banging my head into my desk, I decided I should go back and research the basics of jQuery.
The animation fails to run because when the element is reintroduced into the DOM, it's already in it's 'finished' animation stage. Because there's nothing for jQuery to do, it reports itself as done.
To fix this, a single line is necessary to put the element in the initial stage required by jQuery's slideDown animation: element.css('display', 'none');
Revised code:
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>answered Nov 14 '18 at 15:44
SkycapSkycap
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292262%2fangularjs-nganimate-works-for-ng-leave-but-not-for-ng-enter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
After several more hours of banging my head into my desk, I decided I should go back and research the basics of jQuery.
The animation fails to run because when the element is reintroduced into the DOM, it's already in it's 'finished' animation stage. Because there's nothing for jQuery to do, it reports itself as done.
To fix this, a single line is necessary to put the element in the initial stage required by jQuery's slideDown animation: element.css('display', 'none');
Revised code:
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>answered Nov 14 '18 at 15:44
SkycapSkycap
11
add a comment |
0
After several more hours of banging my head into my desk, I decided I should go back and research the basics of jQuery.
The animation fails to run because when the element is reintroduced into the DOM, it's already in it's 'finished' animation stage. Because there's nothing for jQuery to do, it reports itself as done.
To fix this, a single line is necessary to put the element in the initial stage required by jQuery's slideDown animation: element.css('display', 'none');
Revised code:
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>answered Nov 14 '18 at 15:44
SkycapSkycap
11
add a comment |
0
0
0
After several more hours of banging my head into my desk, I decided I should go back and research the basics of jQuery.
The animation fails to run because when the element is reintroduced into the DOM, it's already in it's 'finished' animation stage. Because there's nothing for jQuery to do, it reports itself as done.
To fix this, a single line is necessary to put the element in the initial stage required by jQuery's slideDown animation: element.css('display', 'none');
Revised code:
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>answered Nov 14 '18 at 15:44
SkycapSkycap
11
After several more hours of banging my head into my desk, I decided I should go back and research the basics of jQuery.
The animation fails to run because when the element is reintroduced into the DOM, it's already in it's 'finished' animation stage. Because there's nothing for jQuery to do, it reports itself as done.
To fix this, a single line is necessary to put the element in the initial stage required by jQuery's slideDown animation: element.css('display', 'none');
Revised code:
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>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>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>answered Nov 14 '18 at 15:44
SkycapSkycap
11
answered Nov 14 '18 at 15:44
SkycapSkycap
11
answered Nov 14 '18 at 15:44
SkycapSkycap
11
answered Nov 14 '18 at 15:44
SkycapSkycap
11
11
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292262%2fangularjs-nganimate-works-for-ng-leave-but-not-for-ng-enter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
