imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update the CSS transition for breadcrumbs

Browse source 
The actual transition length might need adjusting, but this is fairly close to what was requested.
This commit is contained in:
Travis Ralston 2020-06-09 15:06:54 -06:00
parent b5f9c4ba8a
commit 1467191a5d
5 changed files with 89 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

34
res/css/views/rooms/_RoomBreadcrumbs2.scss
View file

@ -14,34 +14,32 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@keyframes breadcrumb-popin {
0% {
// Ideally we'd use `width` instead of `opacity`, but we only
// have 16 nanoseconds to render the frame, and width is expensive.
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.mx_RoomBreadcrumbs2 {
width: 100%;
// Create a flexbox for the crumbs
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
.mx_RoomBreadcrumbs2_crumb {
margin-right: 8px;
width: 32px;
}
// React loves to add elements, so only target the one we want to animate
&:first-child {
animation: breadcrumb-popin 0.3s;
}
// These classes come from the CSSTransition component. There's many more classes we
// could care about, but this is all we worried about for now. The animation works by
// first triggering the enter state with the newest breadcrumb off screen (-40px) then
// sliding it into view.
&.mx_RoomBreadcrumbs2-enter {
margin-left: -40px; // 32px for the avatar, 8px for the margin
}
&.mx_RoomBreadcrumbs2-enter-active {
margin-left: 0;
// Timing function is as-requested by design.
// NOTE: The transition time MUST match the value passed to CSSTransition!
transition: margin-left 300ms cubic-bezier(0.66, 0.02, 0.36, 1);
}
.mx_RoomBreadcrumbs2_placeholder {