Fix transitions
This commit is contained in:
parent
691eafd968
commit
43ad1c2a9d
@ -166,7 +166,7 @@ export default class AppSearchSuper {
|
|||||||
|
|
||||||
for(const mediaTab of this.mediaTabs) {
|
for(const mediaTab of this.mediaTabs) {
|
||||||
const container = document.createElement('div');
|
const container = document.createElement('div');
|
||||||
container.classList.add('search-super-container-' + mediaTab.type);
|
container.classList.add('search-super-container-' + mediaTab.type, 'tabs-tab');
|
||||||
|
|
||||||
const content = document.createElement('div');
|
const content = document.createElement('div');
|
||||||
content.classList.add('search-super-content-' + mediaTab.type);
|
content.classList.add('search-super-content-' + mediaTab.type);
|
||||||
|
@ -93,7 +93,7 @@ export default class Chat extends EventListenerBase<{
|
|||||||
super();
|
super();
|
||||||
|
|
||||||
this.container = document.createElement('div');
|
this.container = document.createElement('div');
|
||||||
this.container.classList.add('chat');
|
this.container.classList.add('chat', 'tabs-tab');
|
||||||
|
|
||||||
this.backgroundEl = document.createElement('div');
|
this.backgroundEl = document.createElement('div');
|
||||||
this.backgroundEl.classList.add('chat-background');
|
this.backgroundEl.classList.add('chat-background');
|
||||||
|
@ -45,7 +45,7 @@ export default class SliderSuperTab implements SliderTab {
|
|||||||
this.destroyable = destroyable;
|
this.destroyable = destroyable;
|
||||||
|
|
||||||
this.container = document.createElement('div');
|
this.container = document.createElement('div');
|
||||||
this.container.classList.add('sidebar-slider-item');
|
this.container.classList.add('tabs-tab', 'sidebar-slider-item');
|
||||||
|
|
||||||
// * Header
|
// * Header
|
||||||
this.header = document.createElement('div');
|
this.header = document.createElement('div');
|
||||||
|
@ -39,7 +39,7 @@
|
|||||||
<div class="whole" id="auth-pages" style="display: none;">
|
<div class="whole" id="auth-pages" style="display: none;">
|
||||||
<div class="scrollable scrollable-y">
|
<div class="scrollable scrollable-y">
|
||||||
<div class="tabs-container auth-pages__container" data-animation="tabs">
|
<div class="tabs-container auth-pages__container" data-animation="tabs">
|
||||||
<div class="page-sign">
|
<div class="tabs-tab page-sign">
|
||||||
<div class="container center-align">
|
<div class="container center-align">
|
||||||
<div class="auth-image">
|
<div class="auth-image">
|
||||||
<svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
|
<svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
|
||||||
@ -48,12 +48,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-signQR">
|
<div class="tabs-tab page-signQR">
|
||||||
<div class="container center-align">
|
<div class="container center-align">
|
||||||
<div class="auth-image"></div>
|
<div class="auth-image"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-authCode">
|
<div class="tabs-tab page-authCode">
|
||||||
<div class="container center-align">
|
<div class="container center-align">
|
||||||
<div class="auth-image"></div>
|
<div class="auth-image"></div>
|
||||||
<div class="phone-wrapper">
|
<div class="phone-wrapper">
|
||||||
@ -64,8 +64,8 @@
|
|||||||
<div class="input-wrapper"></div>
|
<div class="input-wrapper"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="page-password"></div>
|
<div class="tabs-tab page-password"></div>
|
||||||
<div class="page-signUp"></div>
|
<div class="tabs-tab page-signUp"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -86,9 +86,9 @@
|
|||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
<div id="main-columns" class="tabs-container" data-animation="navigation">
|
<div id="main-columns" class="tabs-container" data-animation="navigation">
|
||||||
<div class="chatlist-container sidebar sidebar-left main-column" id="column-left">
|
<div class="tabs-tab chatlist-container sidebar sidebar-left main-column" id="column-left">
|
||||||
<div class="sidebar-slider tabs-container">
|
<div class="sidebar-slider tabs-container">
|
||||||
<div class="sidebar-slider-item item-main">
|
<div class="tabs-tab sidebar-slider-item item-main">
|
||||||
<div class="sidebar-header">
|
<div class="sidebar-header">
|
||||||
<div class="sidebar-header__btn-container">
|
<div class="sidebar-header__btn-container">
|
||||||
<div class="animated-menu-icon"></div>
|
<div class="animated-menu-icon"></div>
|
||||||
@ -107,15 +107,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main-column" id="column-center"></div>
|
<div class="tabs-tab main-column" id="column-center"></div>
|
||||||
<div class="sidebar sidebar-right main-column" id="column-right">
|
<div class="tabs-tab sidebar sidebar-right main-column" id="column-right">
|
||||||
<div class="sidebar-content sidebar-slider tabs-container"></div>
|
<div class="sidebar-content sidebar-slider tabs-container"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="emoji-dropdown" id="emoji-dropdown" style="display: none;">
|
<div class="emoji-dropdown" id="emoji-dropdown" style="display: none;">
|
||||||
<div class="emoji-container">
|
<div class="emoji-container">
|
||||||
<div class="tabs-container">
|
<div class="tabs-container">
|
||||||
<div class="emoji-padding">
|
<div class="tabs-tab emoji-padding">
|
||||||
<nav class="menu-horizontal-div no-stripe">
|
<nav class="menu-horizontal-div no-stripe">
|
||||||
<button class="menu-horizontal-div-item active btn-icon tgico-recent rp"></button>
|
<button class="menu-horizontal-div-item active btn-icon tgico-recent rp"></button>
|
||||||
<button class="menu-horizontal-div-item btn-icon tgico-smile rp"></button>
|
<button class="menu-horizontal-div-item btn-icon tgico-smile rp"></button>
|
||||||
@ -129,7 +129,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<div class="emoticons-content" id="content-emoji"></div>
|
<div class="emoticons-content" id="content-emoji"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stickers-padding">
|
<div class="tabs-tab stickers-padding">
|
||||||
<div class="menu-wrapper">
|
<div class="menu-wrapper">
|
||||||
<nav class="menu-horizontal-div no-stripe justify-start">
|
<nav class="menu-horizontal-div no-stripe justify-start">
|
||||||
<button class="menu-horizontal-div-item btn-icon tgico-recent active"></button>
|
<button class="menu-horizontal-div-item btn-icon tgico-recent active"></button>
|
||||||
@ -137,7 +137,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="emoticons-content" id="content-stickers"></div>
|
<div class="emoticons-content" id="content-stickers"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gifs-padding">
|
<div class="tabs-tab gifs-padding">
|
||||||
<div class="emoticons-content" id="content-gifs">
|
<div class="emoticons-content" id="content-gifs">
|
||||||
<div class="gifs-masonry"></div>
|
<div class="gifs-masonry"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -629,7 +629,7 @@ export class AppDialogsManager {
|
|||||||
const ul = this.createChatList();
|
const ul = this.createChatList();
|
||||||
const scrollable = this.generateScrollable(ul, filter.id);
|
const scrollable = this.generateScrollable(ul, filter.id);
|
||||||
|
|
||||||
scrollable.container.classList.add('chatlist-parts');
|
scrollable.container.classList.add('tabs-tab', 'chatlist-parts');
|
||||||
|
|
||||||
/* const parts = document.createElement('div');
|
/* const parts = document.createElement('div');
|
||||||
parts.classList.add('chatlist-parts'); */
|
parts.classList.add('chatlist-parts'); */
|
||||||
|
@ -24,12 +24,19 @@
|
|||||||
|
|
||||||
&-toggle {
|
&-toggle {
|
||||||
transform: rotate(-119deg);
|
transform: rotate(-119deg);
|
||||||
transition: transform .25s;
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: transform .25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
.part {
|
.part {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: clip-path .25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
@include respond-to(not-handhelds) {
|
@include respond-to(not-handhelds) {
|
||||||
height: 140px;
|
height: 140px;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
@ -177,10 +184,6 @@
|
|||||||
56.87342% 42.46916%
|
56.87342% 42.46916%
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.one, &.two {
|
|
||||||
transition: clip-path .25s;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,8 +34,8 @@ $chat-helper-size: 36px;
|
|||||||
--bottom: var(--padding-bottom);
|
--bottom: var(--padding-bottom);
|
||||||
} */
|
} */
|
||||||
|
|
||||||
body.animation-level-0 & {
|
@include animation-level(0) {
|
||||||
transition: none;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* // * for no ESG top
|
/* // * for no ESG top
|
||||||
@ -532,6 +532,7 @@ $chat-helper-size: 36px;
|
|||||||
//overflow: hidden;
|
//overflow: hidden;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
//z-index: 1;
|
//z-index: 1;
|
||||||
|
transition: transform var(--tabs-transition), filter var(--tabs-transition);
|
||||||
|
|
||||||
@include animation-level(0) {
|
@include animation-level(0) {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
@ -989,8 +990,8 @@ $chat-helper-size: 36px;
|
|||||||
transform: translateY(var(--translateY));
|
transform: translateY(var(--translateY));
|
||||||
transition: transform var(--transition-standard-out);
|
transition: transform var(--transition-standard-out);
|
||||||
|
|
||||||
body.animation-level-0 & {
|
@include animation-level(0) {
|
||||||
transition: none;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* html.is-safari & > .scrollable {
|
/* html.is-safari & > .scrollable {
|
||||||
@ -1080,9 +1081,12 @@ $chat-helper-size: 36px;
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
//--translateY: 0;
|
//--translateY: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: opacity var(--layer-transition), visibility 0s 0s !important;
|
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: opacity var(--layer-transition), visibility 0s 0s !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* &.is-broadcast {
|
/* &.is-broadcast {
|
||||||
--translateY: 79px !important;
|
--translateY: 79px !important;
|
||||||
} */
|
} */
|
||||||
@ -1108,14 +1112,13 @@ $chat-helper-size: 36px;
|
|||||||
max-width: var(--messages-container-width);
|
max-width: var(--messages-container-width);
|
||||||
|
|
||||||
//padding-top: 10000px;
|
//padding-top: 10000px;
|
||||||
|
|
||||||
transition: transform var(--transition-standard-out);
|
transition: transform var(--transition-standard-out);
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
/* transition: margin-top var(--layer-transition);
|
/* transition: margin-top var(--layer-transition);
|
||||||
transition-delay: .2s; */
|
transition-delay: .2s; */
|
||||||
|
|
||||||
body.animation-level-0 & {
|
@include animation-level(0) {
|
||||||
transition: none;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include respond-to(medium-screens) {
|
@include respond-to(medium-screens) {
|
||||||
@ -1171,8 +1174,11 @@ $chat-helper-size: 36px;
|
|||||||
opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
|
opacity: 0.99999 !important; // 0.99999 сделано для сафари, т.к. без этого будет прыжок при скролле в самом низу или верху
|
||||||
|
|
||||||
html.is-safari & {
|
html.is-safari & {
|
||||||
transition: transform var(--transition-standard-in);
|
|
||||||
transform: translateY(calc(var(--translateY) * -1));
|
transform: translateY(calc(var(--translateY) * -1));
|
||||||
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: transform var(--transition-standard-in);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1201,7 +1207,7 @@ $chat-helper-size: 36px;
|
|||||||
//transition: opacity var(--layer-transition);
|
//transition: opacity var(--layer-transition);
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
|
||||||
body.animation-level-0 & {
|
@include animation-level(0) {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -324,6 +324,9 @@ $bubble-margin: .25rem;
|
|||||||
|
|
||||||
html.no-touch & {
|
html.no-touch & {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.no-touch body.animation-level-2 & {
|
||||||
transition: opacity .2s ease-in-out;
|
transition: opacity .2s ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -658,6 +661,10 @@ $bubble-margin: .25rem;
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@include animation-level(0) {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* .bubbles.is-selecting & {
|
/* .bubbles.is-selecting & {
|
||||||
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
|
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
|
||||||
} */
|
} */
|
||||||
@ -668,6 +675,10 @@ $bubble-margin: .25rem;
|
|||||||
|
|
||||||
&-media { // * fix overflow for handhelds
|
&-media { // * fix overflow for handhelds
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
|
||||||
|
@include animation-level(0) {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble-select-checkbox {
|
.bubble-select-checkbox {
|
||||||
@ -1968,9 +1979,12 @@ $bubble-margin: .25rem;
|
|||||||
|
|
||||||
//@include respond-to(no-floating-left-sidebar) {
|
//@include respond-to(no-floating-left-sidebar) {
|
||||||
body.is-right-column-shown & {
|
body.is-right-column-shown & {
|
||||||
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
|
|
||||||
transform: scale(1) translateX(0);
|
transform: scale(1) translateX(0);
|
||||||
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: transform var(--transition-standard-in), opacity var(--transition-standard-in);
|
||||||
|
}
|
||||||
|
|
||||||
&.zoom-fade {
|
&.zoom-fade {
|
||||||
transform: scale3d(.8, .8, 1) translateX(0);
|
transform: scale3d(.8, .8, 1) translateX(0);
|
||||||
}
|
}
|
||||||
|
@ -197,17 +197,16 @@
|
|||||||
width: var(--size);
|
width: var(--size);
|
||||||
height: var(--size);
|
height: var(--size);
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
|
|
||||||
@include animation-level(0) {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border: 2px solid var(--secondary-text-color);
|
border: 2px solid var(--secondary-text-color);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: border-color .1s ease, opacity .1s ease;
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: border-color .1s ease, opacity .1s ease;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
@ -218,7 +217,10 @@
|
|||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
transform: translateY(-50%) scale(0);
|
transform: translateY(-50%) scale(0);
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transition: transform .1s ease;
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: transform .1s ease;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* &-subtitle {
|
/* &-subtitle {
|
||||||
@ -329,19 +331,25 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: background-color .1s;
|
|
||||||
margin: 0 var(--offset);
|
margin: 0 var(--offset);
|
||||||
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: background-color .1s;
|
||||||
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
width: 1.25rem;
|
width: 1.25rem;
|
||||||
height: 1.25rem;
|
height: 1.25rem;
|
||||||
border: 2px solid var(--secondary-color);
|
border: 2px solid var(--secondary-color);
|
||||||
transition: border-color .1s, transform .1s;
|
|
||||||
background-color: var(--surface-color);
|
background-color: var(--surface-color);
|
||||||
content: " ";
|
content: " ";
|
||||||
transform: translateX(calc(var(--offset) * -1));
|
transform: translateX(calc(var(--offset) * -1));
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
|
@include animation-level(2) {
|
||||||
|
transition: border-color .1s, transform .1s;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,7 +97,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
.tabs-tab {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
/* display: flex; */
|
/* display: flex; */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -120,7 +120,7 @@
|
|||||||
// transition: .3s transform;
|
// transition: .3s transform;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
> div {
|
.tabs-tab {
|
||||||
// * can't define these rules because of old firefox, though they don't work
|
// * can't define these rules because of old firefox, though they don't work
|
||||||
//height: 100%;
|
//height: 100%;
|
||||||
//max-height: 100%;
|
//max-height: 100%;
|
||||||
@ -129,11 +129,9 @@
|
|||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
//z-index: 1;
|
|
||||||
|
|
||||||
body.animation-level-0 & {
|
body.animation-level-0 & {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
@ -183,12 +181,30 @@
|
|||||||
}
|
}
|
||||||
} */
|
} */
|
||||||
|
|
||||||
&[data-animation="tabs"] > div {
|
&[data-animation="tabs"] .tabs-tab {
|
||||||
transition: transform var(--tabs-transition);
|
transition: transform var(--tabs-transition);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-animation="navigation"] > div {
|
/* &[data-animation="navigation"] .tabs-tab {
|
||||||
transition: transform var(--tabs-transition), filter var(--tabs-transition);
|
transition: transform var(--tabs-transition), filter var(--tabs-transition);
|
||||||
|
} */
|
||||||
|
|
||||||
|
&[data-animation="navigation"] {
|
||||||
|
/* .tabs-tab {
|
||||||
|
transition: transform var(--tabs-transition), filter var(--tabs-transition);
|
||||||
|
} */
|
||||||
|
|
||||||
|
&.animating {
|
||||||
|
.tabs-tab {
|
||||||
|
transition: transform var(--transition-standard-in), filter var(--transition-standard-in);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.backwards {
|
||||||
|
.tabs-tab {
|
||||||
|
transition: transform var(--transition-standard-out), filter var(--transition-standard-out);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,7 +85,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
.tabs-tab {
|
||||||
/* justify-content: center; */
|
/* justify-content: center; */
|
||||||
/* &.active {
|
/* &.active {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user