Material: Transitions for content changes (ie. Tab content)

Created on 1 Dec 2014  路  3Comments  路  Source: angular/material

When clicking through tabbed content, there are transitions for which tab is selected:
the inkbar slides and the clicked tab ripples.

No transitions are provided, however, for the changing tab content. While this can be added by the user, a default transition should be provided out-of-the-box... but only for tabs with 'managed' content (aka internal content).

External content is not managed by the the <md-tabs/> directive(s).

feature

Most helpful comment

This could be easily solved using a role-based CSS selector for the tabPanel:

[role="tabpanel"] {
    transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    position: absolute; 
}
[role="tabpanel"].ng-enter, [role="tabpanel"].ng-leave.ng-leave-active  {

}

If developers do not want an tab content transition, then a role-based override is easy:

[role="tabpanel"] {
    transition: none;
}

All 3 comments

This could be easily solved using a role-based CSS selector for the tabPanel:

[role="tabpanel"] {
    transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    position: absolute; 
}
[role="tabpanel"].ng-enter, [role="tabpanel"].ng-leave.ng-leave-active  {

}

If developers do not want an tab content transition, then a role-based override is easy:

[role="tabpanel"] {
    transition: none;
}

:+1: :+1: :+1:

Related to (will fix) #717

Was this page helpful?
0 / 5 - 0 ratings