Alternative to using Route Transitions?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This is based on the official docs for route animations.
Ultimately my problem is that I must use height: auto because the content defines the height.
It seems to me that the act of using transition() at that point always contains both routes on the DOM at the same time. Since a trigger requires either state() or transition() only then I am stuck with having 2 routes on the DOM at the same time by definition.
The moment that I position: absolute like all tutorials, my layout collapses to 0px since as I said, the content defines the height.
Is there an alternative way to achieve this at a more advanced level?
Basically I want:
- Be notified when an item is optionally about to be removed from the outlet, then animate it out before continuing
- Be notified when an item is added to the outlet, and then animate it in before continuing.
Whereas I can probably deal with looking at the outlet events, I can rig up the animation maybe. I am unsure how or where to prevent the router from bulldozing my work because by default, the router doesn't care about my 300ms animate requirement.
Has anyone had any success with this kind of thing and can share any way forward?
Alternatively, is it possible to achieve this by breaking the animation into multiple transition statements and if so, are you familar with any more advanced articles on that subject?
angular angular-animations asked Nov 16 '18 at 12:04
user1059939user1059939
183116
add a comment |
This is based on the official docs for route animations.
Ultimately my problem is that I must use height: auto because the content defines the height.
It seems to me that the act of using transition() at that point always contains both routes on the DOM at the same time. Since a trigger requires either state() or transition() only then I am stuck with having 2 routes on the DOM at the same time by definition.
The moment that I position: absolute like all tutorials, my layout collapses to 0px since as I said, the content defines the height.
Is there an alternative way to achieve this at a more advanced level?
Basically I want:
- Be notified when an item is optionally about to be removed from the outlet, then animate it out before continuing
- Be notified when an item is added to the outlet, and then animate it in before continuing.
Whereas I can probably deal with looking at the outlet events, I can rig up the animation maybe. I am unsure how or where to prevent the router from bulldozing my work because by default, the router doesn't care about my 300ms animate requirement.
Has anyone had any success with this kind of thing and can share any way forward?
Alternatively, is it possible to achieve this by breaking the animation into multiple transition statements and if so, are you familar with any more advanced articles on that subject?
angular angular-animations asked Nov 16 '18 at 12:04
user1059939user1059939
183116
add a comment |
This is based on the official docs for route animations.
Ultimately my problem is that I must use height: auto because the content defines the height.
It seems to me that the act of using transition() at that point always contains both routes on the DOM at the same time. Since a trigger requires either state() or transition() only then I am stuck with having 2 routes on the DOM at the same time by definition.
The moment that I position: absolute like all tutorials, my layout collapses to 0px since as I said, the content defines the height.
Is there an alternative way to achieve this at a more advanced level?
Basically I want:
- Be notified when an item is optionally about to be removed from the outlet, then animate it out before continuing
- Be notified when an item is added to the outlet, and then animate it in before continuing.
Whereas I can probably deal with looking at the outlet events, I can rig up the animation maybe. I am unsure how or where to prevent the router from bulldozing my work because by default, the router doesn't care about my 300ms animate requirement.
Has anyone had any success with this kind of thing and can share any way forward?
Alternatively, is it possible to achieve this by breaking the animation into multiple transition statements and if so, are you familar with any more advanced articles on that subject?
angular angular-animations asked Nov 16 '18 at 12:04
user1059939user1059939
183116
This is based on the official docs for route animations.
Ultimately my problem is that I must use height: auto because the content defines the height.
It seems to me that the act of using transition() at that point always contains both routes on the DOM at the same time. Since a trigger requires either state() or transition() only then I am stuck with having 2 routes on the DOM at the same time by definition.
The moment that I position: absolute like all tutorials, my layout collapses to 0px since as I said, the content defines the height.
Is there an alternative way to achieve this at a more advanced level?
Basically I want:
- Be notified when an item is optionally about to be removed from the outlet, then animate it out before continuing
- Be notified when an item is added to the outlet, and then animate it in before continuing.
Whereas I can probably deal with looking at the outlet events, I can rig up the animation maybe. I am unsure how or where to prevent the router from bulldozing my work because by default, the router doesn't care about my 300ms animate requirement.
Has anyone had any success with this kind of thing and can share any way forward?
Alternatively, is it possible to achieve this by breaking the animation into multiple transition statements and if so, are you familar with any more advanced articles on that subject?
angular angular-animations angular angular-animations asked Nov 16 '18 at 12:04
user1059939user1059939
183116
asked Nov 16 '18 at 12:04
user1059939user1059939
183116
edited Nov 16 '18 at 12:12
user1059939
asked Nov 16 '18 at 12:04
user1059939user1059939
183116
asked Nov 16 '18 at 12:04
user1059939user1059939
183116
asked Nov 16 '18 at 12:04
user1059939user1059939
183116
183116
add a comment |
add a comment |
0
active
oldest
votes
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%2f53337553%2falternative-to-using-route-transitions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53337553%2falternative-to-using-route-transitions%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
