Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flip animation to modal popup #282

Closed
dankohn opened this issue Mar 2, 2018 · 7 comments
Closed

Flip animation to modal popup #282

dankohn opened this issue Mar 2, 2018 · 7 comments
Assignees
@AndreyKozlov1984 @alexkontsevoy
Labels
enhancement
Projects
interactive

Comments

@dankohn
Copy link
Contributor

dankohn commented Mar 2, 2018

From filterable-landscape created by dankohn : cncf/filterable-landscape#13

Add a 3-D horizontal flip animation when clicking a card, such as:

http://xue2han.github.io/react-dynamic-modal/
https://www.npmjs.com/package/react-dynamic-modal
@dankohn dankohn added this to Triage in interactive via automation Mar 2, 2018
@dankohn dankohn moved this from Triage to Later in interactive Mar 2, 2018
@alexkontsevoy alexkontsevoy moved this from Later to In progress in interactive Apr 29, 2018
alexkontsevoy added a commit that referenced this issue Apr 29, 2018
@alexkontsevoy
Flip animation to modal popup #282
b3d6d7e
@alexkontsevoy
Copy link
Contributor

@ZeusTheTrueGod I've added css transition (and styles for it) to the modal, but it does not fire when the modal is closed, it is just removed from the DOM. Please see if you can make the exit transition work

@dankohn dankohn mentioned this issue May 6, 2018
Closed
@dankohn
Copy link
Contributor Author

dankohn commented May 6, 2018

@alexkontsevoy in addition to making it work on close, could you please also try to have the card grow and flip from it's current location, as with: https://stackoverflow.com/a/35499596/1935918

@AndreyKozlov1984
Copy link
Contributor

I'll add 2 new states today : 'opening' and 'closing' so a css has a chance to properly display everything

@AndreyKozlov1984
Copy link
Contributor

To make it grow and flip, we 'll have to make some calculations

alexkontsevoy added a commit that referenced this issue May 16, 2018
@alexkontsevoy
Flip animation to modal popup #282
9d67e95
@dankohn dankohn moved this from In progress to Soon in interactive Jun 16, 2018
@dankohn dankohn moved this from Soon to Later in interactive Sep 12, 2018
@AndreyKozlov1984 AndreyKozlov1984 moved this from Later to In progress in interactive Nov 13, 2018
@AndreyKozlov1984
Copy link
Contributor

AndreyKozlov1984 commented Nov 14, 2018 •
edited

Now animation, although a different one, is supported from a framework, and that is good.
I want to try to also add a slide animation when a persons chooses a next or a previous item via clicking on left / right arrows

@dankohn
Copy link
Contributor Author

dankohn commented Nov 16, 2018

I appreciate the hardwork here, but don't like the flip after all.

@dankohn
Copy link
Contributor Author

dankohn commented Nov 16, 2018

You can close and delete branch.

interactive automation moved this from In progress to Done Nov 16, 2018
AndreyKozlov1984 added a commit to AndreyKozlov1984/landscape that referenced this issue Nov 18, 2018
@AndreyKozlov1984 @dankohn
dialog opening animation via material ui, close cncf#282 (cncf#968)
4c60e33 
* Starting a dialog with a simple fade animation

* just a 500 delay to make it looking more natural

* horizontal flip

* a bit better transition

* final changes to make it looking awesome

* fixes for an iphone; keeping content visible on closing a dialog

* one more fix for iPhones

* ensure that we get a failure when it does not work on iPhone X

* A proper version where everything works

* do not change data in this PR

* prepare to merge to the master

* just keep a simple fade in / fade out animation

* fix iPhone issues with extra next/prev buttons

* get it working for a landscape layout too
AndreyKozlov1984 added a commit to AndreyKozlov1984/landscape that referenced this issue Nov 18, 2018
@AndreyKozlov1984 @dankohn
dialog opening animation via material ui, close cncf#282 (cncf#968)
6c6ec91 
* Starting a dialog with a simple fade animation

* just a 500 delay to make it looking more natural

* horizontal flip

* a bit better transition

* final changes to make it looking awesome

* fixes for an iphone; keeping content visible on closing a dialog

* one more fix for iPhones

* ensure that we get a failure when it does not work on iPhone X

* A proper version where everything works

* do not change data in this PR

* prepare to merge to the master

* just keep a simple fade in / fade out animation

* fix iPhone issues with extra next/prev buttons

* get it working for a landscape layout too


Former-commit-id: 4c60e33
AndreyKozlov1984 added a commit to AndreyKozlov1984/landscape that referenced this issue Nov 18, 2018
@AndreyKozlov1984 @dankohn
dialog opening animation via material ui, close cncf#282 (cncf#968)
5e242d5 
* Starting a dialog with a simple fade animation

* just a 500 delay to make it looking more natural

* horizontal flip

* a bit better transition

* final changes to make it looking awesome

* fixes for an iphone; keeping content visible on closing a dialog

* one more fix for iPhones

* ensure that we get a failure when it does not work on iPhone X

* A proper version where everything works

* do not change data in this PR

* prepare to merge to the master

* just keep a simple fade in / fade out animation

* fix iPhone issues with extra next/prev buttons

* get it working for a landscape layout too


Former-commit-id: 4c60e33
AndreyKozlov1984 added a commit that referenced this issue Nov 18, 2018
@AndreyKozlov1984 @dankohn
dialog opening animation via material ui, close #282 (#968)
35a545c 
* Starting a dialog with a simple fade animation

* just a 500 delay to make it looking more natural

* horizontal flip

* a bit better transition

* final changes to make it looking awesome

* fixes for an iphone; keeping content visible on closing a dialog

* one more fix for iPhones

* ensure that we get a failure when it does not work on iPhone X

* A proper version where everything works

* do not change data in this PR

* prepare to merge to the master

* just keep a simple fade in / fade out animation

* fix iPhone issues with extra next/prev buttons

* get it working for a landscape layout too
AndreyKozlov1984 added a commit that referenced this issue Nov 19, 2018
@AndreyKozlov1984 @dankohn
dialog opening animation via material ui, close #282 (#968)
271fe1f 
* Starting a dialog with a simple fade animation

* just a 500 delay to make it looking more natural

* horizontal flip

* a bit better transition

* final changes to make it looking awesome

* fixes for an iphone; keeping content visible on closing a dialog

* one more fix for iPhones

* ensure that we get a failure when it does not work on iPhone X

* A proper version where everything works

* do not change data in this PR

* prepare to merge to the master

* just keep a simple fade in / fade out animation

* fix iPhone issues with extra next/prev buttons

* get it working for a landscape layout too
AndreyKozlov1984 added a commit that referenced this issue Dec 28, 2018
@AndreyKozlov1984 @dankohn
dialog opening animation via material ui, close #282 (#968)
8916ae9 
* Starting a dialog with a simple fade animation

* just a 500 delay to make it looking more natural

* horizontal flip

* a bit better transition

* final changes to make it looking awesome

* fixes for an iphone; keeping content visible on closing a dialog

* one more fix for iPhones

* ensure that we get a failure when it does not work on iPhone X

* A proper version where everything works

* do not change data in this PR

* prepare to merge to the master

* just keep a simple fade in / fade out animation

* fix iPhone issues with extra next/prev buttons

* get it working for a landscape layout too
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@AndreyKozlov1984 AndreyKozlov1984

@alexkontsevoy alexkontsevoy

Labels
enhancement
Projects
No open projects
interactive
  
Done
Milestone
No milestone
Development

No branches or pull requests
3 participants
@AndreyKozlov1984 @dankohn @alexkontsevoy