javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): drawer animation use transition replace keyframe (#3447)

Browse Source 
* refactor(components): drawer animation use transition replace keyframe

* fix(components): fix drawer leave animation
This commit is contained in:
云游君
2021-09-19 00:09:41 +08:00
committed by GitHub
parent 5ff3de24b5
commit 0836097c55
3 changed files with 55 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vitepress/vitepress/index.ts
View File

@@ -1,5 +1,7 @@
import 'normalize.css'
import 'element-plus/dist/index.css'
// import 'element-plus/dist/index.css'
// for dev
import '../../../packages/theme-chalk/src/index.scss'
import './styles/app.scss'
import VPApp from './components/vp-app.vue'

2
packages/components/drawer/src/index.vue
View File

@@ -19,7 +19,7 @@
aria-modal="true"
aria-labelledby="el-drawer__title"
:aria-label="title"
:class="['el-drawer', direction, customClass]"
:class="['el-drawer', direction, visible && 'open', customClass]"
:style="
isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize
"

131
packages/theme-chalk/src/drawer.scss
View File

@@ -2,73 +2,6 @@
@import 'mixins/var';
@import 'common/var';
@keyframes #{$namespace}-drawer-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@mixin drawer-animation($direction) {
@keyframes #{$direction}-drawer-animation {
0% {
@if $direction == ltr {
transform: translate(0px, 0px);
}
@if $direction == rtl {
transform: translate(0px, 0px);
}
@if $direction == ttb {
transform: translate(0px, 0px);
}
@if $direction == btt {
transform: translate(0px, 0px);
}
}
100% {
@if $direction == ltr {
transform: translate(-100%, 0px);
}
@if $direction == rtl {
transform: translate(100%, 0px);
}
@if $direction == ttb {
transform: translate(0px, -100%);
}
@if $direction == btt {
transform: translate(0px, 100%);
}
}
}
}
@mixin animation-in($direction) {
&.#{$direction} {
animation: #{$direction}-drawer-animation var(--el-transition-duration) linear
reverse;
}
}
@mixin animation-out($direction) {
&.#{$direction} {
animation: #{$direction}-drawer-animation var(--el-transition-duration) linear;
}
}
@include drawer-animation(rtl);
@include drawer-animation(ltr);
@include drawer-animation(ttb);
@include drawer-animation(btt);
$directions: rtl, ltr, ttb, btt;
@include b(drawer) {
@@ -85,13 +18,11 @@ $directions: rtl, ltr, ttb, btt;
0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
overflow: hidden;
@each $direction in $directions {
.#{$namespace}-drawer-fade-enter-active & {
@include animation-in($direction);
}
transition: all var(--el-transition-duration);
.#{$namespace}-drawer-fade-leave-active & {
@include animation-out($direction);
@each $direction in $directions {
.#{$direction} {
transform: translate(0, 0);
}
}
@@ -130,6 +61,7 @@ $directions: rtl, ltr, ttb, btt;
&__body {
flex: 1;
padding: var(--el-drawer-padding-primary);
& > * {
box-sizing: border-box;
}
@@ -166,12 +98,51 @@ $directions: rtl, ltr, ttb, btt;
}
}
.#{$namespace}-drawer-fade-enter-active {
animation: #{$namespace}-drawer-fade-in var(--el-transition-duration);
overflow: hidden !important;
}
.#{$namespace}-drawer-fade {
&-enter-active,
&-leave-active {
transition: all var(--el-transition-duration);
}
.#{$namespace}-drawer-fade-leave-active {
overflow: hidden !important;
animation: #{$namespace}-drawer-fade-in var(--el-transition-duration) reverse;
&-enter-from,
&-enter-active,
&-enter-to,
&-leave-from,
&-leave-active,
&-leave-to {
overflow: hidden !important;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-to,
&-leave-from {
opacity: 1;
}
&-enter-from,
&-leave-to {
@each $direction in $directions {
.#{$direction} {
@if $direction == ltr {
transform: translateX(-100%);
}
@if $direction == rtl {
transform: translateX(100%);
}
@if $direction == ttb {
transform: translateY(-100%);
}
@if $direction == btt {
transform: translateY(100%);
}
}
}
}
}