From 934de6b1e62b1cf0472633c77cc4f8d0451b6518 Mon Sep 17 00:00:00 2001 From: Hansen Wang Date: Mon, 24 Apr 2023 03:57:10 +0800 Subject: [PATCH] Add animation less back --- src/App.vue | 4 ++ src/styles/index.less | 1 + src/styles/transition/base.less | 18 +++++++ src/styles/transition/fade.less | 81 +++++++++++++++++++++++++++++++ src/styles/transition/index.less | 10 ++++ src/styles/transition/scale.less | 21 ++++++++ src/styles/transition/scroll.less | 67 +++++++++++++++++++++++++ src/styles/transition/slide.less | 39 +++++++++++++++ src/styles/transition/zoom.less | 27 +++++++++++ 9 files changed, 268 insertions(+) create mode 100644 src/styles/index.less create mode 100644 src/styles/transition/base.less create mode 100644 src/styles/transition/fade.less create mode 100644 src/styles/transition/index.less create mode 100644 src/styles/transition/scale.less create mode 100644 src/styles/transition/scroll.less create mode 100644 src/styles/transition/slide.less create mode 100644 src/styles/transition/zoom.less diff --git a/src/App.vue b/src/App.vue index 5cc85e5..94635a6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -81,3 +81,7 @@ document.removeEventListener('mousedown', timekeeping); }); + + diff --git a/src/styles/index.less b/src/styles/index.less new file mode 100644 index 0000000..9d07915 --- /dev/null +++ b/src/styles/index.less @@ -0,0 +1 @@ +@import 'transition/index.less'; diff --git a/src/styles/transition/base.less b/src/styles/transition/base.less new file mode 100644 index 0000000..7944c8b --- /dev/null +++ b/src/styles/transition/base.less @@ -0,0 +1,18 @@ +.transition-default() { + &-enter-active, + &-leave-active { + transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important; + } + + &-move { + transition: transform 0.4s; + } +} + +.expand-transition { + .transition-default(); +} + +.expand-x-transition { + .transition-default(); +} diff --git a/src/styles/transition/fade.less b/src/styles/transition/fade.less new file mode 100644 index 0000000..1f8e63e --- /dev/null +++ b/src/styles/transition/fade.less @@ -0,0 +1,81 @@ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.2s ease-in-out; +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} + +/* fade-slide */ +.fade-slide-leave-active, +.fade-slide-enter-active { + transition: all 0.3s; +} + +.fade-slide-enter-from { + opacity: 0; + transform: translateX(-30px); +} + +.fade-slide-leave-to { + opacity: 0; + transform: translateX(30px); +} + +// /////////////////////////////////////////////// +// Fade Bottom +// /////////////////////////////////////////////// + +// Speed: 1x +.fade-bottom-enter-active, +.fade-bottom-leave-active { + transition: opacity 0.25s, transform 0.3s; +} + +.fade-bottom-enter-from { + opacity: 0; + transform: translateY(-10%); +} + +.fade-bottom-leave-to { + opacity: 0; + transform: translateY(10%); +} + +// fade-scale +.fade-scale-leave-active, +.fade-scale-enter-active { + transition: all 0.28s; +} + +.fade-scale-enter-from { + opacity: 0; + transform: scale(1.2); +} + +.fade-scale-leave-to { + opacity: 0; + transform: scale(0.8); +} + +// /////////////////////////////////////////////// +// Fade Top +// /////////////////////////////////////////////// + +// Speed: 1x +.fade-top-enter-active, +.fade-top-leave-active { + transition: opacity 0.2s, transform 0.25s; +} + +.fade-top-enter-from { + opacity: 0; + transform: translateY(8%); +} + +.fade-top-leave-to { + opacity: 0; + transform: translateY(-8%); +} diff --git a/src/styles/transition/index.less b/src/styles/transition/index.less new file mode 100644 index 0000000..e372b25 --- /dev/null +++ b/src/styles/transition/index.less @@ -0,0 +1,10 @@ +@import './base.less'; +@import './fade.less'; +@import './scale.less'; +@import './slide.less'; +@import './scroll.less'; +@import './zoom.less'; + +.collapse-transition { + transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out; +} diff --git a/src/styles/transition/scale.less b/src/styles/transition/scale.less new file mode 100644 index 0000000..c965493 --- /dev/null +++ b/src/styles/transition/scale.less @@ -0,0 +1,21 @@ +.scale-transition { + .transition-default(); + + &-enter-from, + &-leave, + &-leave-to { + opacity: 0; + transform: scale(0); + } +} + +.scale-rotate-transition { + .transition-default(); + + &-enter-from, + &-leave, + &-leave-to { + opacity: 0; + transform: scale(0) rotate(-45deg); + } +} diff --git a/src/styles/transition/scroll.less b/src/styles/transition/scroll.less new file mode 100644 index 0000000..a5f45e4 --- /dev/null +++ b/src/styles/transition/scroll.less @@ -0,0 +1,67 @@ +.scroll-y-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateY(-15px); + } + + &-leave-to { + transform: translateY(15px); + } +} + +.scroll-y-reverse-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateY(15px); + } + + &-leave-to { + transform: translateY(-15px); + } +} + +.scroll-x-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateX(-15px); + } + + &-leave-to { + transform: translateX(15px); + } +} + +.scroll-x-reverse-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + } + + &-enter-from { + transform: translateX(15px); + } + + &-leave-to { + transform: translateX(-15px); + } +} diff --git a/src/styles/transition/slide.less b/src/styles/transition/slide.less new file mode 100644 index 0000000..79b00df --- /dev/null +++ b/src/styles/transition/slide.less @@ -0,0 +1,39 @@ +.slide-y-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + transform: translateY(-15px); + } +} + +.slide-y-reverse-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + transform: translateY(15px); + } +} + +.slide-x-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + transform: translateX(-15px); + } +} + +.slide-x-reverse-transition { + .transition-default(); + + &-enter-from, + &-leave-to { + opacity: 0; + transform: translateX(15px); + } +} diff --git a/src/styles/transition/zoom.less b/src/styles/transition/zoom.less new file mode 100644 index 0000000..2ea378c --- /dev/null +++ b/src/styles/transition/zoom.less @@ -0,0 +1,27 @@ +// zoom-out +.zoom-out-enter-active, +.zoom-out-leave-active { + transition: opacity 0.1 ease-in-out, transform 0.15s ease-out; +} + +.zoom-out-enter-from, +.zoom-out-leave-to { + opacity: 0; + transform: scale(0); +} + +// zoom-fade +.zoom-fade-enter-active, +.zoom-fade-leave-active { + transition: transform 0.2s, opacity 0.3s ease-out; +} + +.zoom-fade-enter-from { + opacity: 0; + transform: scale(0.92); +} + +.zoom-fade-leave-to { + opacity: 0; + transform: scale(1.06); +}