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.

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

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

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 Make animation between navigation states easier/better Feb 23, 2015
nicksay added a commit to nicksay/spfjs that referenced this issue Feb 23, 2015
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 added a commit to nicksay/spfjs that referenced this issue Mar 2, 2015
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 added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
nicksay added a commit to nicksay/spfjs that referenced this issue Mar 3, 2015
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
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
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 added a commit to nicksay/spfjs that referenced this issue Mar 6, 2015
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 10, 2015
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
Projects
None yet
Development

No branches or pull requests

1 participant