From 156ac98583638fc7e2550ff279500bc2632e7fed Mon Sep 17 00:00:00 2001 From: qcc Date: Wed, 5 Dec 2018 18:49:00 +0800 Subject: [PATCH] =?UTF-8?q?toast=E4=B8=80=E4=B8=AA=E4=B8=AA=E5=BE=80?= =?UTF-8?q?=E4=B8=8B=E5=A0=86=E5=8F=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/base.css | 8 +++--- dist/base.js | 32 +++++++++++++++++---- dist/bundle.css | 8 +++--- dist/bundle.ie.js | 36 +++++++++++++++++++----- dist/bundle.js | 36 +++++++++++++++++++----- dist/case.js | 4 ++- dist/demo.js | 1 - dist/fineui.css | 8 +++--- dist/fineui.ie.js | 36 +++++++++++++++++++----- dist/fineui.js | 36 +++++++++++++++++++----- dist/fineui_without_jquery_polyfill.js | 32 +++++++++++++++++---- src/base/foundation/message.js | 26 +++++++++++++---- src/base/single/tip/tip.toast.js | 6 +++- src/css/base/foundation/bi.css | 8 +++--- src/less/base/foundation/bi.message.less | 2 +- 15 files changed, 214 insertions(+), 65 deletions(-) diff --git a/dist/base.css b/dist/base.css index 505fce153..b72a4db7d 100644 --- a/dist/base.css +++ b/dist/base.css @@ -615,10 +615,10 @@ font-size: 16px; } .bi-message-animate { - -webkit-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -moz-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -o-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; + -webkit-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -moz-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -o-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; } .bi-message-enter { opacity: 1; diff --git a/dist/base.js b/dist/base.js index fe04c6a32..75630e2a2 100644 --- a/dist/base.js +++ b/dist/base.js @@ -5176,6 +5176,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -5196,7 +5198,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -5204,17 +5221,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { @@ -11502,9 +11518,13 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast);/** * toast提示 * diff --git a/dist/bundle.css b/dist/bundle.css index 526d83926..a055e1d20 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -2587,10 +2587,10 @@ textarea { font-size: 16px; } .bi-message-animate { - -webkit-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -moz-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -o-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; + -webkit-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -moz-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -o-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; } .bi-message-enter { opacity: 1; diff --git a/dist/bundle.ie.js b/dist/bundle.ie.js index e25736cbb..e6d3b56d6 100644 --- a/dist/bundle.ie.js +++ b/dist/bundle.ie.js @@ -40262,6 +40262,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -40282,7 +40284,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -40290,17 +40307,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { @@ -46588,9 +46604,13 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast);/** * toast提示 * @@ -51803,6 +51823,8 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, { element: this, container: o.container, value: o.value, + width: o.width, + height: o.height, popup: { type: "bi.simple_color_chooser_popup" } @@ -52584,7 +52606,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { })); } }); -BI.SimpleColorPickerEditor.EVENT_CHANGE = "SimpleColorPickerEditor.EVENT_CHANGE"; +BI.SimpleColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);/** * 选色控件 * diff --git a/dist/bundle.js b/dist/bundle.js index 728d335dd..82c369c1d 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -40666,6 +40666,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -40686,7 +40688,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -40694,17 +40711,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { @@ -46992,9 +47008,13 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast);/** * toast提示 * @@ -52207,6 +52227,8 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, { element: this, container: o.container, value: o.value, + width: o.width, + height: o.height, popup: { type: "bi.simple_color_chooser_popup" } @@ -52988,7 +53010,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { })); } }); -BI.SimpleColorPickerEditor.EVENT_CHANGE = "SimpleColorPickerEditor.EVENT_CHANGE"; +BI.SimpleColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);/** * 选色控件 * diff --git a/dist/case.js b/dist/case.js index 67d0427ee..e0dd35c52 100644 --- a/dist/case.js +++ b/dist/case.js @@ -2611,6 +2611,8 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, { element: this, container: o.container, value: o.value, + width: o.width, + height: o.height, popup: { type: "bi.simple_color_chooser_popup" } @@ -3392,7 +3394,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { })); } }); -BI.SimpleColorPickerEditor.EVENT_CHANGE = "SimpleColorPickerEditor.EVENT_CHANGE"; +BI.SimpleColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);/** * 选色控件 * diff --git a/dist/demo.js b/dist/demo.js index ffdb374ef..d29af9c55 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -726,7 +726,6 @@ BI.shortcut("demo.editor", Demo.Editor);Demo.CodeEditor = BI.inherit(BI.Widget, cls: "layout-bg1", items: [{ type: "bi.multifile_editor", - accept: "*.zip;", width: 400, height: 300 }], diff --git a/dist/fineui.css b/dist/fineui.css index ea95344b1..c873f09c8 100644 --- a/dist/fineui.css +++ b/dist/fineui.css @@ -2587,10 +2587,10 @@ textarea { font-size: 16px; } .bi-message-animate { - -webkit-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -moz-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -o-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; + -webkit-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -moz-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -o-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; } .bi-message-enter { opacity: 1; diff --git a/dist/fineui.ie.js b/dist/fineui.ie.js index bd9400cab..f1c4339e0 100644 --- a/dist/fineui.ie.js +++ b/dist/fineui.ie.js @@ -40504,6 +40504,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -40524,7 +40526,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -40532,17 +40549,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { @@ -46830,9 +46846,13 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast);/** * toast提示 * @@ -52045,6 +52065,8 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, { element: this, container: o.container, value: o.value, + width: o.width, + height: o.height, popup: { type: "bi.simple_color_chooser_popup" } @@ -52826,7 +52848,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { })); } }); -BI.SimpleColorPickerEditor.EVENT_CHANGE = "SimpleColorPickerEditor.EVENT_CHANGE"; +BI.SimpleColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);/** * 选色控件 * diff --git a/dist/fineui.js b/dist/fineui.js index baa7d07ac..358609cf8 100644 --- a/dist/fineui.js +++ b/dist/fineui.js @@ -40908,6 +40908,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -40928,7 +40930,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -40936,17 +40953,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { @@ -47234,9 +47250,13 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast);/** * toast提示 * @@ -52449,6 +52469,8 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, { element: this, container: o.container, value: o.value, + width: o.width, + height: o.height, popup: { type: "bi.simple_color_chooser_popup" } @@ -53230,7 +53252,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { })); } }); -BI.SimpleColorPickerEditor.EVENT_CHANGE = "SimpleColorPickerEditor.EVENT_CHANGE"; +BI.SimpleColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);/** * 选色控件 * diff --git a/dist/fineui_without_jquery_polyfill.js b/dist/fineui_without_jquery_polyfill.js index 9df393903..261a74e68 100644 --- a/dist/fineui_without_jquery_polyfill.js +++ b/dist/fineui_without_jquery_polyfill.js @@ -28517,6 +28517,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -28537,7 +28539,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -28545,17 +28562,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { @@ -34222,9 +34238,13 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast);/** * toast提示 * diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js index 1a9e3205f..a4a7abf0c 100644 --- a/src/base/foundation/message.js +++ b/src/base/foundation/message.js @@ -7,6 +7,8 @@ BI.Msg = function () { var messageShow, $mask, $pop; + var toastStack = []; + return { alert: function (title, message, callback) { this._show(false, title, message, callback); @@ -27,7 +29,22 @@ BI.Msg = function () { cls: "bi-message-animate bi-message-leave", level: level, autoClose: autoClose, - text: message + text: message, + listeners: [{ + eventName: BI.Toast.EVENT_DESTORY, + action: function () { + BI.remove(toastStack, toast.element); + var _height = 10; + BI.each(toastStack, function (i, element) { + element.css({"top": _height}); + _height += element.outerHeight() + 10; + }); + } + }] + }); + var height = 10; + BI.each(toastStack, function (i, element) { + height += element.outerHeight() + 10; }); BI.createWidget({ type: "bi.absolute", @@ -35,17 +52,16 @@ BI.Msg = function () { items: [{ el: toast, left: "50%", - top: 10 + top: height }] }); + toastStack.push(toast.element); toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); autoClose && BI.delay(function () { toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); - BI.delay(function () { - toast.destroy(); - }, 1000); + toast.destroy(); }, 5000); }, _show: function (hasCancel, title, message, callback) { diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index 268ddecfe..99ae29dd3 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -88,7 +88,11 @@ BI.Toast = BI.inherit(BI.Tip, { setText: function (text) { this.text.setText(text); + }, + + beforeDestroy: function () { + this.fireEvent(BI.Toast.EVENT_DESTORY); } }); - +BI.Toast.EVENT_DESTORY = "EVENT_DESTORY"; BI.shortcut("bi.toast", BI.Toast); \ No newline at end of file diff --git a/src/css/base/foundation/bi.css b/src/css/base/foundation/bi.css index fb0c4433f..f27535811 100644 --- a/src/css/base/foundation/bi.css +++ b/src/css/base/foundation/bi.css @@ -18,10 +18,10 @@ font-size: 16px; } .bi-message-animate { - -webkit-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -moz-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - -o-transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; - transition: opacity 0.3s, transform 0.4s, -webkit-transform 0.4s; + -webkit-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -moz-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + -o-transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; + transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s; } .bi-message-enter { opacity: 1; diff --git a/src/less/base/foundation/bi.message.less b/src/less/base/foundation/bi.message.less index 5da4a752c..e3c482013 100644 --- a/src/less/base/foundation/bi.message.less +++ b/src/less/base/foundation/bi.message.less @@ -19,7 +19,7 @@ } .bi-message-animate { - @val: opacity .3s, transform .4s, -webkit-transform .4s; + @val: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;; .transition(@val); }