Two Angular animations for modal dialogsCombining multiple jQuery animations?Structuring a reusable angular component with multiple communicating directivesAngular JS Switcharoo multiple select moduleCondensing multiple conditionals into functionFunction to split full name into first & lastProperly updating multiple MongoDB documents with AngularAngular validation function for a user creation formAngular controller to handle showing or hiding multiple widgetsJavaScript/Angular 1 - Multiple complex ng-if conditions propertiesAngular form data over multiple components
How to test the sharpness of a knife?
Error in master's thesis, I do not know what to do
Exposing a company lying about themselves in a tightly knit industry (videogames) : Is my career at risk on the long run?
Would this string work as string?
Started in 1987 vs. Starting in 1987
How are passwords stolen from companies if they only store hashes?
Can creatures abilities target that creature itself?
Offset in split text content
Why doesn't Gödel's incompleteness theorem apply to false statements?
Has the laser at Magurele, Romania reached the tenth of the Sun power?
Get top 1 row value from third table while joining 3 tables mssql
Why would five hundred and five same as one?
Is this Pascal's Matrix?
Why do Radio Buttons not fill the entire outer circle?
Is there any common country to visit for persons holding UK and Schengen visas?
Asserting that Atheism and Theism are both faith based positions
Should I be concerned about student access to a test bank?
Is there a page on which I can view all Sitecore jobs running?
python displays `n` instead of breaking a line
Reason why a kingside attack is not justified
What should be the ideal length of sentences in a blog post for ease of reading?
Have any astronauts/cosmonauts died in space?
Capacitor electron flow
What's the meaning of "what it means for something to be something"?
Two Angular animations for modal dialogs
Combining multiple jQuery animations?Structuring a reusable angular component with multiple communicating directivesAngular JS Switcharoo multiple select moduleCondensing multiple conditionals into functionFunction to split full name into first & lastProperly updating multiple MongoDB documents with AngularAngular validation function for a user creation formAngular controller to handle showing or hiding multiple widgetsJavaScript/Angular 1 - Multiple complex ng-if conditions propertiesAngular form data over multiple components
$begingroup$
I'm using Ionic 4 and Angular animations to animate modals. I created the following two functions that control the animations but they share a lot of repeated code. Is there a way I can clean these up into a single function that just takes an array of parameters for the animations?
import Injectable from '@angular/core';
import Animation from '@ionic/core';
@Injectable(
providedIn: 'root'
)
export class AnimationsService
modalLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
const wrapperElRect = wrapperEl!.getBoundingClientRect();
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(0%)', 'translateX(100%)')
.fromTo('opacity', 1, 0)
.fromTo('-webkit-backdrop-filter', 'blur(7px)', 'blur(0px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation)
);
modalEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(100%)', 'translateX(0%)')
.fromTo('opacity', 0, 1)
.fromTo('-webkit-backdrop-filter', 'blur(0px)', 'blur(7px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(wrapperAnimation)
);
angular.js animation typescript
edited 10 mins ago
200_success
130k17154419
asked 2 hours ago
Joe ScottoJoe Scotto
22529
$endgroup$
add a comment |
$begingroup$
I'm using Ionic 4 and Angular animations to animate modals. I created the following two functions that control the animations but they share a lot of repeated code. Is there a way I can clean these up into a single function that just takes an array of parameters for the animations?
import Injectable from '@angular/core';
import Animation from '@ionic/core';
@Injectable(
providedIn: 'root'
)
export class AnimationsService
modalLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
const wrapperElRect = wrapperEl!.getBoundingClientRect();
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(0%)', 'translateX(100%)')
.fromTo('opacity', 1, 0)
.fromTo('-webkit-backdrop-filter', 'blur(7px)', 'blur(0px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation)
);
modalEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(100%)', 'translateX(0%)')
.fromTo('opacity', 0, 1)
.fromTo('-webkit-backdrop-filter', 'blur(0px)', 'blur(7px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(wrapperAnimation)
);
angular.js animation typescript
edited 10 mins ago
200_success
130k17154419
asked 2 hours ago
Joe ScottoJoe Scotto
22529
$endgroup$
add a comment |
$begingroup$
I'm using Ionic 4 and Angular animations to animate modals. I created the following two functions that control the animations but they share a lot of repeated code. Is there a way I can clean these up into a single function that just takes an array of parameters for the animations?
import Injectable from '@angular/core';
import Animation from '@ionic/core';
@Injectable(
providedIn: 'root'
)
export class AnimationsService
modalLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
const wrapperElRect = wrapperEl!.getBoundingClientRect();
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(0%)', 'translateX(100%)')
.fromTo('opacity', 1, 0)
.fromTo('-webkit-backdrop-filter', 'blur(7px)', 'blur(0px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation)
);
modalEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(100%)', 'translateX(0%)')
.fromTo('opacity', 0, 1)
.fromTo('-webkit-backdrop-filter', 'blur(0px)', 'blur(7px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(wrapperAnimation)
);
angular.js animation typescript
edited 10 mins ago
200_success
130k17154419
asked 2 hours ago
Joe ScottoJoe Scotto
22529
$endgroup$
I'm using Ionic 4 and Angular animations to animate modals. I created the following two functions that control the animations but they share a lot of repeated code. Is there a way I can clean these up into a single function that just takes an array of parameters for the animations?
import Injectable from '@angular/core';
import Animation from '@ionic/core';
@Injectable(
providedIn: 'root'
)
export class AnimationsService
modalLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
const wrapperElRect = wrapperEl!.getBoundingClientRect();
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(0%)', 'translateX(100%)')
.fromTo('opacity', 1, 0)
.fromTo('-webkit-backdrop-filter', 'blur(7px)', 'blur(0px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(backdropAnimation)
.add(wrapperAnimation)
);
modalEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation>
const baseAnimation = new AnimationC();
const backdropAnimation = new AnimationC();
backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
const wrapperAnimation = new AnimationC();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation
.beforeStyles(
opacity: 1
)
.fromTo('transform', 'translateX(100%)', 'translateX(0%)')
.fromTo('opacity', 0, 1)
.fromTo('-webkit-backdrop-filter', 'blur(0px)', 'blur(7px)');
return Promise.resolve(
baseAnimation
.addElement(baseEl)
.easing('ease-in')
.duration(150)
.add(wrapperAnimation)
);
angular.js animation typescript
angular.js animation typescript
edited 10 mins ago
200_success
130k17154419
asked 2 hours ago
Joe ScottoJoe Scotto
22529
edited 10 mins ago
200_success
130k17154419
asked 2 hours ago
Joe ScottoJoe Scotto
22529
edited 10 mins ago
200_success
130k17154419
edited 10 mins ago
200_success
130k17154419
edited 10 mins ago
200_success
130k17154419
130k17154419
asked 2 hours ago
Joe ScottoJoe Scotto
22529
asked 2 hours ago
Joe ScottoJoe Scotto
22529
asked 2 hours ago
Joe ScottoJoe Scotto
22529
22529
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");
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: "196"
;
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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%2fcodereview.stackexchange.com%2fquestions%2f215779%2ftwo-angular-animations-for-modal-dialogs%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 Code Review Stack Exchange!
- 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.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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%2fcodereview.stackexchange.com%2fquestions%2f215779%2ftwo-angular-animations-for-modal-dialogs%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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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');
var $window = $(window),
onScroll = function(e)
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom))
StackExchange.using('gps', function() StackExchange.gps.track('embedded_signup_form.view', location: 'question_page' ); );
$window.unbind('scroll', onScroll);
;
$window.on('scroll', onScroll);
);
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
