guy 3 years ago
parent
commit
885c8e7a57
  1. 4
      src/case/combo/bubblecombo/popup.bubble.js
  2. 9
      src/less/base/combo/combo.bubble.less
  3. 3
      src/less/base/segment/button.segment.less
  4. 36
      src/less/core/utils/motion/fade.less
  5. 131
      src/less/core/utils/motion/move.less
  6. 131
      src/less/core/utils/motion/slide.less
  7. 181
      src/less/core/utils/motion/zoom.less
  8. 1
      src/less/index.less
  9. 1
      src/less/modern.less
  10. 96
      src/less/motion.less

4
src/case/combo/bubblecombo/popup.bubble.js

@ -8,7 +8,7 @@ BI.BubblePopupView = BI.inherit(BI.PopupView, {
_defaultConfig: function () {
var config = BI.BubblePopupView.superclass._defaultConfig.apply(this, arguments);
return BI.extend(config, {
baseCls: config.baseCls + " bi-bubble-popup-view",
baseCls: config.baseCls + " bi-bubble-popup-view bi-zoom-big-leave bi-zoom-big-leave-active",
minWidth: 220,
maxWidth: 300,
minHeight: 90
@ -102,7 +102,7 @@ BI.TextBubblePopupBarView = BI.inherit(BI.Widget, {
props: function () {
return {
baseCls: "bi-text-bubble-bar-popup-view",
baseCls: "bi-text-bubble-bar-popup-view bi-bubble-popup-view",
text: "",
buttons: [{
level: "ignore",

9
src/less/base/combo/combo.bubble.less

@ -32,6 +32,15 @@
}
}
.bi-combo-popup.bi-bubble-popup-view {
&.bi-zoom-big-leave{
.zoom-big-motion-enter();
}
&.bi-zoom-big-leave-active{
.zoom-big-motion-enter-active();
}
}
.bi-popup-view[data-popper-placement^='top'] {
> .bi-bubble-arrow {
bottom: -10px;

3
src/less/base/segment/button.segment.less

@ -1,6 +1,7 @@
@import "../../index";
.bi-segment-button {
.transition(color .3s,background .3s,border-color .3s,box-shadow .3s);
@transition: color .3s,background .3s,border-color .3s,box-shadow .3s;
.transition(@transition);
color: @color-bi-text-highlight;
}

36
src/less/core/utils/motion/fade.less

@ -0,0 +1,36 @@
@import "../../../index";
.fade-motion(@className, @keyframeName) {
@name: ~'bi-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: linear;
}
.@{name}-leave {
animation-timing-function: linear;
}
}
.fade-motion(fade, biFade);
@keyframes biFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes biFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

131
src/less/core/utils/motion/move.less

@ -0,0 +1,131 @@
@import "../../../index";
.move-motion(@className, @keyframeName) {
@name: ~'bi-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: @ease-out-circ;
}
.@{name}-leave {
animation-timing-function: @ease-in-circ;
}
}
.move-motion(move-up, biMoveUp);
.move-motion(move-down, biMoveDown);
.move-motion(move-left, biMoveLeft);
.move-motion(move-right, biMoveRight);
@keyframes biMoveDownIn {
0% {
transform: translateY(100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes biMoveDownOut {
0% {
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateY(100%);
transform-origin: 0 0;
opacity: 0;
}
}
@keyframes biMoveLeftIn {
0% {
transform: translateX(-100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes biMoveLeftOut {
0% {
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateX(-100%);
transform-origin: 0 0;
opacity: 0;
}
}
@keyframes biMoveRightIn {
0% {
transform: translateX(100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes biMoveRightOut {
0% {
transform: translateX(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateX(100%);
transform-origin: 0 0;
opacity: 0;
}
}
@keyframes biMoveUpIn {
0% {
transform: translateY(-100%);
transform-origin: 0 0;
opacity: 0;
}
100% {
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
}
@keyframes biMoveUpOut {
0% {
transform: translateY(0%);
transform-origin: 0 0;
opacity: 1;
}
100% {
transform: translateY(-100%);
transform-origin: 0 0;
opacity: 0;
}
}

131
src/less/core/utils/motion/slide.less

@ -0,0 +1,131 @@
@import "../../../index";
.slide-motion(@className, @keyframeName) {
@name: ~'bi-@{className}';
.make-motion(@name, @keyframeName);
.@{name}-enter,
.@{name}-appear {
opacity: 0;
animation-timing-function: @ease-out-quint;
}
.@{name}-leave {
animation-timing-function: @ease-in-quint;
}
}
.slide-motion(slide-up, biSlideUp);
.slide-motion(slide-down, biSlideDown);
.slide-motion(slide-left, biSlideLeft);
.slide-motion(slide-right, biSlideRight);
@keyframes biSlideUpIn {
0% {
transform: scaleY(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
100% {
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes biSlideUpOut {
0% {
transform: scaleY(1);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
transform: scaleY(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes biSlideDownIn {
0% {
transform: scaleY(0.8);
transform-origin: 100% 100%;
opacity: 0;
}
100% {
transform: scaleY(1);
transform-origin: 100% 100%;
opacity: 1;
}
}
@keyframes biSlideDownOut {
0% {
transform: scaleY(1);
transform-origin: 100% 100%;
opacity: 1;
}
100% {
transform: scaleY(0.8);
transform-origin: 100% 100%;
opacity: 0;
}
}
@keyframes biSlideLeftIn {
0% {
transform: scaleX(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
100% {
transform: scaleX(1);
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes biSlideLeftOut {
0% {
transform: scaleX(1);
transform-origin: 0% 0%;
opacity: 1;
}
100% {
transform: scaleX(0.8);
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes biSlideRightIn {
0% {
transform: scaleX(0.8);
transform-origin: 100% 0%;
opacity: 0;
}
100% {
transform: scaleX(1);
transform-origin: 100% 0%;
opacity: 1;
}
}
@keyframes biSlideRightOut {
0% {
transform: scaleX(1);
transform-origin: 100% 0%;
opacity: 1;
}
100% {
transform: scaleX(0.8);
transform-origin: 100% 0%;
opacity: 0;
}
}

181
src/less/core/utils/motion/zoom.less

@ -0,0 +1,181 @@
@import "../../../index";
.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
@name: ~'bi-@{className}';
.make-motion(@name, @keyframeName, @duration);
.@{name}-enter,
.@{name}-appear {
transform: scale(0); // need this by yiminghe
opacity: 0;
animation-timing-function: @ease-out-circ;
&-prepare {
transform: none;
}
}
.@{name}-leave {
animation-timing-function: @ease-in-out-circ;
}
}
// For Modal, Select choosen item
.zoom-motion(zoom, biZoom);
// For Popover, Popconfirm, Dropdown
.zoom-motion(zoom-big, biZoomBig);
// For Tooltip
.zoom-motion(zoom-big-fast, biZoomBig, @animation-duration-fast);
.zoom-motion(zoom-up, biZoomUp);
.zoom-motion(zoom-down, biZoomDown);
.zoom-motion(zoom-left, biZoomLeft);
.zoom-motion(zoom-right, biZoomRight);
@keyframes biZoomIn {
0% {
transform: scale(0.2);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes biZoomOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.2);
opacity: 0;
}
}
@keyframes biZoomBigIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes biZoomBigOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
@keyframes biZoomUpIn {
0% {
transform: scale(0.8);
transform-origin: 50% 0%;
opacity: 0;
}
100% {
transform: scale(1);
transform-origin: 50% 0%;
}
}
@keyframes biZoomUpOut {
0% {
transform: scale(1);
transform-origin: 50% 0%;
}
100% {
transform: scale(0.8);
transform-origin: 50% 0%;
opacity: 0;
}
}
@keyframes biZoomLeftIn {
0% {
transform: scale(0.8);
transform-origin: 0% 50%;
opacity: 0;
}
100% {
transform: scale(1);
transform-origin: 0% 50%;
}
}
@keyframes biZoomLeftOut {
0% {
transform: scale(1);
transform-origin: 0% 50%;
}
100% {
transform: scale(0.8);
transform-origin: 0% 50%;
opacity: 0;
}
}
@keyframes biZoomRightIn {
0% {
transform: scale(0.8);
transform-origin: 100% 50%;
opacity: 0;
}
100% {
transform: scale(1);
transform-origin: 100% 50%;
}
}
@keyframes biZoomRightOut {
0% {
transform: scale(1);
transform-origin: 100% 50%;
}
100% {
transform: scale(0.8);
transform-origin: 100% 50%;
opacity: 0;
}
}
@keyframes biZoomDownIn {
0% {
transform: scale(0.8);
transform-origin: 50% 100%;
opacity: 0;
}
100% {
transform: scale(1);
transform-origin: 50% 100%;
}
}
@keyframes biZoomDownOut {
0% {
transform: scale(1);
transform-origin: 50% 100%;
}
100% {
transform: scale(0.8);
transform-origin: 50% 100%;
opacity: 0;
}
}

1
src/less/index.less

@ -2,6 +2,7 @@
@import "box-model";
@import "typographic";
@import "visual";
@import "motion";
@import "var";
@import "lib/colors";
@import "lib/theme";

1
src/less/modern.less

@ -9,6 +9,7 @@
@import "core/utils/size.less";
@import "core/utils/sizing.less";
@import "core/utils/typographic.less";
@import "core/utils/motion.less";
@import "core/wrapper/flex.horizontal.less";
@import "core/wrapper/flex.vertical.less";
@import "core/wrapper/flex.wrapper.horizontal.less";

96
src/less/motion.less

@ -0,0 +1,96 @@
// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip
.motion-common(@duration: @animation-duration-base) {
animation-duration: @duration;
animation-fill-mode: both;
}
.motion-common-leave(@duration: @animation-duration-base) {
animation-duration: @duration;
animation-fill-mode: both;
}
.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
.@{className}-enter,
.@{className}-appear {
.motion-common(@duration);
animation-play-state: paused;
}
.@{className}-leave {
.motion-common-leave(@duration);
animation-play-state: paused;
}
.@{className}-enter.@{className}-enter-active,
.@{className}-appear.@{className}-appear-active {
animation-name: ~'@{keyframeName}In';
animation-play-state: running;
}
.@{className}-leave.@{className}-leave-active {
animation-name: ~'@{keyframeName}Out';
animation-play-state: running;
pointer-events: none;
}
}
.fade-motion-enter() {
opacity: 0;
animation-timing-function: linear;
.motion-common(@animation-duration-base);
animation-name: biFadeIn;
animation-play-state: running;
}
.fade-motion-leave() {
animation-timing-function: linear;
.motion-common-leave(@animation-duration-base);
animation-name: biFadeOut;
animation-play-state: running;
pointer-events: none;
}
.zoom-big-motion-enter() {
transform: scale(0); // need this by yiminghe
opacity: 0;
animation-timing-function: @ease-out-circ;
.motion-common(@animation-duration-base);
animation-play-state: paused;
}
.zoom-big-motion-enter-active() {
animation-name: biZoomBigIn;
animation-play-state: running;
}
.zoom-big-motion-leave() {
animation-timing-function: @ease-in-out-circ;
.motion-common-leave(@animation-duration-base);
}
.zoom-big-motion-leave-active() {
animation-name: biZoomBigOut;
animation-play-state: running;
pointer-events: none;
}
Loading…
Cancel
Save