834695 - [Transitions. UX] Implement Dismissing settings transitions as specified.

Status: RESOLVED INVALID

(Firefox OS Graveyard :: Gaia::Cost Control, defect)

Description

[Victoria Gerchinhoren [:vicky]]

Settings screen has no transition when dismissed. Apply as specified:
https://www.dropbox.com/sh/ekzrrz7um4uj6y0/NVzqB1D4hx/03%20Transitions
TransitionsVXX.pdf (latest version)

Lack of Transitions affect the experience. Required for TEF build.
Transitions a key feature to give the user a clue of the architecture of the OS and how to navigate it.

Comment 1

[Salvador de la Puente González [:salva]]

It is implemented, the problem is a weird blank flash effect that appears when disposing settings and performing other transitions.

I've used the following schema to do transitions. The view has the following CSS rules:

.view {
 /* non related rules */
 transition: transform .3s ease;
}

And when I want to move it to the bottom I use:

.view[data-viewport="bottom"] {
  transform: translateY(100%);
}

Then I set or unset the data-viewport property. Setting it, causes the view to be moved to the bottom. Removing it causes the view to return to the original position.

For some reason, when setting the data-viewport to bottom, those behind the view is temporally covered by this strange blank overlay for a 100ms and then disappear. I don't know why but If I change the default position rule to:

.view {
  /* non related rules */
  transform: translate(0, 0); /* this has been explicitly set */
  transition: transform .3s ease;
}

I include the resolution in the patch for bug #834696.