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-Original-Commit-Position: refs/heads/master@{#469582}
Review-Url: https://codereview.chromium.org/2889653005 .
Cr-Commit-Position: refs/branch-heads/3071@{#590}
Cr-Branched-From: a106f0abbf69dad349d4aaf4bcc4f5d376dd2377-refs/heads/master@{#464641}
Committed: https://chromium.googlesource.com/chromium/src/+/056d542cd1bdab430bd4d39df75e47cbc941cd87

[Dan Beam, 2017-05-16 23:00:31]

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

Review-Url: https://codereview.chromium.org/2856223007
Cr-Commit-Position: refs/heads/master@{#469582}
(cherry picked from commit 32a9e92ea1f387e91a9f7b87e19ce48f3990404c)
==========

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-Original-Commit-Position: refs/heads/master@{#469582}
Review-Url: https://codereview.chromium.org/2889653005 .
Cr-Commit-Position: refs/branch-heads/3071@{#590}
Cr-Branched-From:
a106f0abbf69dad349d4aaf4bcc4f5d376dd2377-refs/heads/master@{#464641}
Committed:
https://chromium.googlesource.com/chromium/src/+/056d542cd1bdab430bd4d39df75e...
==========

[Dan Beam, 2017-05-16 23:00:33]

Committed patchset #1 (id:1) manually as
056d542cd1bdab430bd4d39df75e47cbc941cd87.