Angular - how to replace this jQuery state change with correct Angular code?
In a component I have a subject that fires a .next(value) and it triggers this jQuery logic:
if (this.isOpen) {
jQuery(`#preview-${this.index}`).
stop().slideDown('fast');
} else {
jQuery(`#preview-${this.index}`).
stop().css('display', 'block').slideUp('fast');
};
You can see it is targeting an id, so I know that I have to replace that with a @ViewChild decorator construct.
How do I use @ViewChild in combination with scss keyframes to achieve the same functionality so I can remove the JQuery.
Since this is a very simple CSS transition, I am looking for a way to do this without having to use the angular animation library (unless that is the only way of course).
Note
I found the identical problem asked and answered for AngularJS here, but not Angular (yet anyway!)
jquery
angular sass css-animations keyframe asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
add a comment |
In a component I have a subject that fires a .next(value) and it triggers this jQuery logic:
if (this.isOpen) {
jQuery(`#preview-${this.index}`).
stop().slideDown('fast');
} else {
jQuery(`#preview-${this.index}`).
stop().css('display', 'block').slideUp('fast');
};
You can see it is targeting an id, so I know that I have to replace that with a @ViewChild decorator construct.
How do I use @ViewChild in combination with scss keyframes to achieve the same functionality so I can remove the JQuery.
Since this is a very simple CSS transition, I am looking for a way to do this without having to use the angular animation library (unless that is the only way of course).
Note
I found the identical problem asked and answered for AngularJS here, but not Angular (yet anyway!)
jquery
angular sass css-animations keyframe asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
add a comment |
In a component I have a subject that fires a .next(value) and it triggers this jQuery logic:
if (this.isOpen) {
jQuery(`#preview-${this.index}`).
stop().slideDown('fast');
} else {
jQuery(`#preview-${this.index}`).
stop().css('display', 'block').slideUp('fast');
};
You can see it is targeting an id, so I know that I have to replace that with a @ViewChild decorator construct.
How do I use @ViewChild in combination with scss keyframes to achieve the same functionality so I can remove the JQuery.
Since this is a very simple CSS transition, I am looking for a way to do this without having to use the angular animation library (unless that is the only way of course).
Note
I found the identical problem asked and answered for AngularJS here, but not Angular (yet anyway!)
jquery
angular sass css-animations keyframe asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
In a component I have a subject that fires a .next(value) and it triggers this jQuery logic:
if (this.isOpen) {
jQuery(`#preview-${this.index}`).
stop().slideDown('fast');
} else {
jQuery(`#preview-${this.index}`).
stop().css('display', 'block').slideUp('fast');
};
You can see it is targeting an id, so I know that I have to replace that with a @ViewChild decorator construct.
How do I use @ViewChild in combination with scss keyframes to achieve the same functionality so I can remove the JQuery.
Since this is a very simple CSS transition, I am looking for a way to do this without having to use the angular animation library (unless that is the only way of course).
Note
I found the identical problem asked and answered for AngularJS here, but not Angular (yet anyway!)
jquery
angular sass css-animations keyframe jquery
angular sass css-animations keyframe asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
edited Nov 21 '18 at 11:53
rmcsharry
asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
asked Nov 21 '18 at 9:24
rmcsharryrmcsharry
2,29332658
2,29332658
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
There were a couple of issues in making this work:
Notice that at the end the code is applying 'display:none' to hide the element. jQuery applies that after the animation ends. So the problem here is that you cannot animate a display:none (obviously, as there is nothing there!). This question helped me understand this.
The jQuery slidedown is simply animating the height of the element, bringing it to 0.
So with that knowledge it became quite easy. First set up the two states with css classes and the animation:
.fb-card-open {
display: block;
}
.fb-card-closed {
display: block;
overflow: hidden;
animation: slideup;
padding-top: 0;
padding-bottom: 0;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideup {
0% { height:inherit; }
100% { height:0; }
}
This means we have the open state and the closed state at 100%, which basically sets the height to 0 and removes padding top and bottom (since there is padded text inside the animated element so even with height 0, you would still see some vertical space)
Then use [ngClass] directive to switch between the two classes:
[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"
Thanks to this article which helped understand how to do this (the article is about AngularJS, not Angular, but the principle is the same as the [ngClass] directive behaves the same way)
Note
If you set the padding:0 instead of just top and bottom, you get a cool 'fly-in' effect for the children of the element, which is kind of a nifty bonus I found by doing this!
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
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
});
}
});
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%2f53408845%2fangular-how-to-replace-this-jquery-state-change-with-correct-angular-code%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
There were a couple of issues in making this work:
Notice that at the end the code is applying 'display:none' to hide the element. jQuery applies that after the animation ends. So the problem here is that you cannot animate a display:none (obviously, as there is nothing there!). This question helped me understand this.
The jQuery slidedown is simply animating the height of the element, bringing it to 0.
So with that knowledge it became quite easy. First set up the two states with css classes and the animation:
.fb-card-open {
display: block;
}
.fb-card-closed {
display: block;
overflow: hidden;
animation: slideup;
padding-top: 0;
padding-bottom: 0;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideup {
0% { height:inherit; }
100% { height:0; }
}
This means we have the open state and the closed state at 100%, which basically sets the height to 0 and removes padding top and bottom (since there is padded text inside the animated element so even with height 0, you would still see some vertical space)
Then use [ngClass] directive to switch between the two classes:
[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"
Thanks to this article which helped understand how to do this (the article is about AngularJS, not Angular, but the principle is the same as the [ngClass] directive behaves the same way)
Note
If you set the padding:0 instead of just top and bottom, you get a cool 'fly-in' effect for the children of the element, which is kind of a nifty bonus I found by doing this!
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
add a comment |
There were a couple of issues in making this work:
Notice that at the end the code is applying 'display:none' to hide the element. jQuery applies that after the animation ends. So the problem here is that you cannot animate a display:none (obviously, as there is nothing there!). This question helped me understand this.
The jQuery slidedown is simply animating the height of the element, bringing it to 0.
So with that knowledge it became quite easy. First set up the two states with css classes and the animation:
.fb-card-open {
display: block;
}
.fb-card-closed {
display: block;
overflow: hidden;
animation: slideup;
padding-top: 0;
padding-bottom: 0;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideup {
0% { height:inherit; }
100% { height:0; }
}
This means we have the open state and the closed state at 100%, which basically sets the height to 0 and removes padding top and bottom (since there is padded text inside the animated element so even with height 0, you would still see some vertical space)
Then use [ngClass] directive to switch between the two classes:
[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"
Thanks to this article which helped understand how to do this (the article is about AngularJS, not Angular, but the principle is the same as the [ngClass] directive behaves the same way)
Note
If you set the padding:0 instead of just top and bottom, you get a cool 'fly-in' effect for the children of the element, which is kind of a nifty bonus I found by doing this!
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
add a comment |
There were a couple of issues in making this work:
Notice that at the end the code is applying 'display:none' to hide the element. jQuery applies that after the animation ends. So the problem here is that you cannot animate a display:none (obviously, as there is nothing there!). This question helped me understand this.
The jQuery slidedown is simply animating the height of the element, bringing it to 0.
So with that knowledge it became quite easy. First set up the two states with css classes and the animation:
.fb-card-open {
display: block;
}
.fb-card-closed {
display: block;
overflow: hidden;
animation: slideup;
padding-top: 0;
padding-bottom: 0;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideup {
0% { height:inherit; }
100% { height:0; }
}
This means we have the open state and the closed state at 100%, which basically sets the height to 0 and removes padding top and bottom (since there is padded text inside the animated element so even with height 0, you would still see some vertical space)
Then use [ngClass] directive to switch between the two classes:
[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"
Thanks to this article which helped understand how to do this (the article is about AngularJS, not Angular, but the principle is the same as the [ngClass] directive behaves the same way)
Note
If you set the padding:0 instead of just top and bottom, you get a cool 'fly-in' effect for the children of the element, which is kind of a nifty bonus I found by doing this!
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
There were a couple of issues in making this work:
Notice that at the end the code is applying 'display:none' to hide the element. jQuery applies that after the animation ends. So the problem here is that you cannot animate a display:none (obviously, as there is nothing there!). This question helped me understand this.
The jQuery slidedown is simply animating the height of the element, bringing it to 0.
So with that knowledge it became quite easy. First set up the two states with css classes and the animation:
.fb-card-open {
display: block;
}
.fb-card-closed {
display: block;
overflow: hidden;
animation: slideup;
padding-top: 0;
padding-bottom: 0;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideup {
0% { height:inherit; }
100% { height:0; }
}
This means we have the open state and the closed state at 100%, which basically sets the height to 0 and removes padding top and bottom (since there is padded text inside the animated element so even with height 0, you would still see some vertical space)
Then use [ngClass] directive to switch between the two classes:
[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"
Thanks to this article which helped understand how to do this (the article is about AngularJS, not Angular, but the principle is the same as the [ngClass] directive behaves the same way)
Note
If you set the padding:0 instead of just top and bottom, you get a cool 'fly-in' effect for the children of the element, which is kind of a nifty bonus I found by doing this!
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
answered Nov 21 '18 at 12:53
rmcsharryrmcsharry
2,29332658
2,29332658
add a comment |
add a comment |
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.
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%2f53408845%2fangular-how-to-replace-this-jquery-state-change-with-correct-angular-code%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
