Add anim
This commit is contained in:
@@ -23,6 +23,9 @@
|
|||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-right: 1px solid var(--surface-border);
|
border-right: 1px solid var(--surface-border);
|
||||||
|
transition:
|
||||||
|
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
|
||||||
|
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0px 3px 5px rgba(0, 0, 0, 0.02),
|
0px 3px 5px rgba(0, 0, 0, 0.02),
|
||||||
0px 0px 2px rgba(0, 0, 0, 0.05),
|
0px 0px 2px rgba(0, 0, 0, 0.05),
|
||||||
@@ -78,6 +81,9 @@
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
|
transition:
|
||||||
|
transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99),
|
||||||
|
left 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-mask {
|
.layout-mask {
|
||||||
@@ -98,7 +104,6 @@
|
|||||||
|
|
||||||
.layout-mask {
|
.layout-mask {
|
||||||
display: block;
|
display: block;
|
||||||
animation: fadein var(--layout-section-transition-duration);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ const isOutsideClicked = (event) => {
|
|||||||
</div>
|
</div>
|
||||||
<app-footer></app-footer>
|
<app-footer></app-footer>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-mask"></div>
|
<div class="layout-mask animate-fadein"></div>
|
||||||
</div>
|
</div>
|
||||||
<Toast />
|
<Toast />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user