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

Make animation between navigation states easier/better #299

Open
nicksay opened this issue Feb 23, 2015 · 0 comments
Open

Make animation between navigation states easier/better #299

nicksay opened this issue Feb 23, 2015 · 0 comments
Labels
enhancement

Comments

@nicksay
Copy link
Contributor

nicksay commented Feb 23, 2015

This is a general issue to track various improvements to animation during navigation transitions.
@nicksay nicksay changed the title Make animation between navigation states easier Feb 23, 2015
This was referenced Feb 23, 2015
Merged
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 23, 2015
@nicksay
Animation: Deprecate combo CSS classes in favor of discrete ones.
3b7664b 
Previously CSS animation classes had to target both the history direction
(forward/back) as well as the animation point (start/end) via a combination
class, even if the properties were shared:
```
.spf-animate-forward-start .spf-animate-new,
.spf-animate-forward-end   .spf-animate-old,
.spf-animate-reverse-start .spf-animate-new,
.spf-animate-reverse-end   .spf-animate-old {
  opacity: 0;
}
```

Now, the classes will be split into discrete ones that represent a single
target only:
`.spf-animate-forward-start  ->  .spf-animate-forward.spf-animate-start`
`.spf-animate-reverse-end  ->  .spf-animate-reverse.spf-animate-end`

This allows less verbose CSS when doing animation that does not change based
on history direction.

Progress on youtube#299.
@nicksay nicksay mentioned this issue Feb 23, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 2, 2015
@nicksay
Pass shared values when processing multipart responses.
68b2a2a 
This change allows values from one part of a multipart response to be handled
during processing of subsequent parts.

The motivating use case is to allow a response to specify a "name" to use during
CSS-based animation once and have it apply to all subsequent parts.
For example instead of:

```json
[{"name": "my-page", "body": {"id-1": "content-1"}},
 {"name": "my-page", "body": {"id-2": "content-2"}},
 {"name": "my-page", "body": {"id-3": "content-3"}}]
```

The following would now be processed as if the above were sent:

```json
[{"name": "my-page", "body": {"id-1": "content-1"}},
 {"body": {"id-2": "content-2"}},
 {"body": {"id-3": "content-3"}}]
```

Progress on youtube#299.

SAVEPOINT

handle shared values

revert server

revert islated client changes

revert parts of spf.nav

revert parts of spf.nav.response
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
@nicksay
Update spf.dom.classlist to handle empty strings safely.
481079e 
Progress on youtube#299.
@nicksay nicksay mentioned this issue Mar 3, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
@nicksay
Update spf.dom.classlist to handle empty strings safely.
0ca314c 
Progress on youtube#299.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
@nicksay
Enable animation based on page transitions.
6ca9656 
Responses can now send a `name` value which will be used to construct "from"
and "to" CSS classes that will be applied during updates.  These two classes
will be applied with the following patterns:

* `config['animation-class'] + '-from-' + _previous_name_
* `config['animation-class'] + '-from-' + _current_name_

Progress on youtube#299.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
@nicksay
Enable animation based on page transitions.
bbef7b6 
Responses can now send a `name` value which will be used to construct "from"
and "to" CSS classes that will be applied during updates.  These two classes
will be applied with the following patterns:

* `config['animation-class'] + '-from-' + _previous_name_`
* `config['animation-class'] + '-to-' + _current_name_`

This will allow transitions to be applied based on state of the page (i.e.
navigating from page A to page B) instead of based on the action (i.e.
navigating back in the history stack).

Progress on youtube#299.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
@nicksay
Enable animation based on page transitions.
23f0982 
Responses can now send a `name` value which will be used to construct "from"
and "to" CSS classes that will be applied during updates.  These two classes
will be applied with the following patterns:

* `config['animation-class'] + '-from-' + _previous_name_`
* `config['animation-class'] + '-to-' + _current_name_`

This will allow transitions to be applied based on state of the page (i.e.
navigating from page A to page B) instead of based on the action (i.e.
navigating back in the history stack).

Currently, a `name` must be sent with each part of a multipart response for it
to be used when processing that part.  The last `name` value will be saved
for upcoming "from" classes.

In order to initialize a "from" class before the first SPF navigation, pages
can set the `data-spf-name` attribute on the `<body>` tag:

```html
<body data-spf-name="home" ...>
```

Progress on youtube#299.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
@nicksay
Update spf.dom.classlist to handle empty strings safely.
a94889c 
Progress on youtube#299.
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 6, 2015
@nicksay
Enable animation based on navigation transitions.
dcdbd21 
Responses can now send a `name` value which will be used to construct "from"
and "to" CSS classes that will be applied during updates.  These two classes
will be applied with the following patterns:

* `config['animation-class'] + '-from-' + _previous_name_`
* `config['animation-class'] + '-to-' + _current_name_`

This will allow transitions to be applied based on state of the page (i.e.
navigating from page A to page B) instead of based on the action (i.e.
navigating back in the history stack).

Currently, a `name` must be sent with each part of a multipart response for it
to be used when processing that part.  The last `name` value will be saved
for upcoming "from" classes.

In order to initialize a "from" class before the first SPF navigation, pages
can set the `data-spf-name` attribute on the `<body>` tag:

```html
<body data-spf-name="home" ...>
```

Progress on youtube#299.
@nicksay nicksay mentioned this issue Mar 6, 2015
Merged
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 10, 2015
@nicksay
Enable animation based on navigation transitions.
5c02113 
Responses can now send a `name` value which will be used to construct "from"
and "to" CSS classes that will be applied during updates.  These two classes
will be applied with the following patterns:

* `config['animation-class'] + '-from-' + _previous_name_`
* `config['animation-class'] + '-to-' + _current_name_`

This will allow transitions to be applied based on state of the page (i.e.
navigating from page A to page B) instead of based on the action (i.e.
navigating back in the history stack).

Currently, a `name` must be sent with each part of a multipart response for it
to be used when processing that part.  The last `name` value will be saved
for upcoming "from" classes.

In order to initialize a "from" class before the first SPF navigation, pages
can set the `data-spf-name` attribute on the `<body>` tag:

```html
<body data-spf-name="home" ...>
```

Progress on youtube#299.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement
1 participant
@nicksay