MD Settings: Shorten page fade transitions

MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

Shortening the fade duration to match the expand/collapse animation makes
that overlap much less likely to occur. It also makes the animations
appear snappier, IMO -- if the page is still fading after expanding, it
looks slugging.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2856223007
Cr-Commit-Position: refs/heads/master@{#469582}
Committed: https://chromium.googlesource.com/chromium/src/+/32a9e92ea1f387e91a9f7b87e19ce48f3990404c

[michaelpg, 2017-05-04 21:05:09]

Description was changed from

==========
MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
==========

to

==========
MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[michaelpg, 2017-05-04 21:06:18]

Description was changed from

==========
MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

Shortening the fade duration to match the expand/collapse animation makes
that overlap much less likely to occur. It also makes the animations
appear snappier, IMO -- if the page is still fading after expanding, it
looks slugging.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[michaelpg, 2017-05-04 21:08:07]

55 lines because of one hard-to-change constant in
neon-animated-pages... but definitely a visual improvement.
PTAL.

[Dan Beam, 2017-05-04 22:46:37]

lgtm

https://codereview.chromium.org/2856223007/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/animation/fade_animations.js (right):

https://codereview.chromium.org/2856223007/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/animation/fade_animations.js:18: {'opacity':
'1'}
fun fact: if you add a trailing comma, clang-format acts differently about long
literals

[michaelpg, 2017-05-04 23:06:07]

Patchset #3 (id:40001) has been deleted

[michaelpg, 2017-05-04 23:07:26]

https://codereview.chromium.org/2856223007/diff/1/chrome/browser/resources/se...
File chrome/browser/resources/settings/animation/fade_animations.js (right):

https://codereview.chromium.org/2856223007/diff/1/chrome/browser/resources/se...
chrome/browser/resources/settings/animation/fade_animations.js:18: {'opacity':
'1'}
On 2017/05/04 22:46:37, Dan Beam wrote:
> fun fact: if you add a trailing comma, clang-format acts differently about
long
> literals

Nice. I like trailing commas (this was mostly copied from the Polymer source).

Also forgot to add to compiled_resources2.gyp so here's PS3.

[Dan Beam, 2017-05-04 23:29:24]

still lgtm

[michaelpg, 2017-05-05 01:58:07]

The CQ bit was checked by michaelpg@chromium.org

[commit-bot: I haz the power, 2017-05-05 01:58:49]

CQ is trying da patch.

Follow status at:
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2017-05-05 03:09:10]

CQ is committing da patch.

Bot data: {"patchset_id": 60001, "attempt_start_ts": 1493949487364140,
"parent_rev": "620e181dec3897ea1abd40e0572a58f97fa65936", "commit_rev":
"32a9e92ea1f387e91a9f7b87e19ce48f3990404c"}

[commit-bot: I haz the power, 2017-05-05 03:09:38]

Description was changed from

==========
MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

Shortening the fade duration to match the expand/collapse animation makes
that overlap much less likely to occur. It also makes the animations
appear snappier, IMO -- if the page is still fading after expanding, it
looks slugging.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
MD Settings: Shorten page fade transitions

Expanding or collapsing a section takes 350ms, but fading the new content
in and the old content out takes 500ms. This is a contributing factor to
the overlap seen when closing a section, as the old section is still
visible when the collapse animation has completed.

Shortening the fade duration to match the expand/collapse animation makes
that overlap much less likely to occur. It also makes the animations
appear snappier, IMO -- if the page is still fading after expanding, it
looks slugging.

This re-implements the fade animations, rather than programmatically
changing the neon-animated-pages' transition durations for the
existing fade-in-animation/fade-out-animation. The latter is not possible
due to https://github.com/PolymerElements/neon-animation/issues/209.

R=dbeam@chromium.org
BUG=716680
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2856223007
Cr-Commit-Position: refs/heads/master@{#469582}
Committed:
https://chromium.googlesource.com/chromium/src/+/32a9e92ea1f387e91a9f7b87e19c...
==========

[commit-bot: I haz the power, 2017-05-05 03:09:39]

Committed patchset #3 (id:60001) as
https://chromium.googlesource.com/chromium/src/+/32a9e92ea1f387e91a9f7b87e19c...