Research transitions of various UI components to improve the overall UX

[oleq]

Input

(included in ckeditor/ckeditor5-theme-lark#140)

Button

diff --git a/theme/ckeditor5-ui/components/button/button.css b/theme/ckeditor5-ui/components/button/button.css
index 373db22..74aa089 100644
--- a/theme/ckeditor5-ui/components/button/button.css
+++ b/theme/ckeditor5-ui/components/button/button.css
@@ -22,6 +22,8 @@ a.ck-button {
 	padding: var(--ck-spacing-tiny);
 	text-align: center;
 
+	transition: background .2s ease-in-out;
+
 	/* A very important piece of styling. Go to variable declaration to learn more. */
 	min-width: var(--ck-ui-component-min-height);
 	min-height: var(--ck-ui-component-min-height);

Dropdown

diff --git a/theme/components/dropdown/dropdown.css b/theme/components/dropdown/dropdown.css
index d4ce77d..4c91e2c 100644
--- a/theme/components/dropdown/dropdown.css
+++ b/theme/components/dropdown/dropdown.css
@@ -35,12 +35,14 @@
 	which looks like the panel moves vertically a pixel down and up. */
 	-webkit-backface-visibility: hidden;
 
-	display: none;
+	/*display: none;*/
 	z-index: var(--ck-z-modal);
 
 	position: absolute;
 	left: 0px;
-	transform: translate3d( 0, 100%, 0 );
+	transform: translate3d( 0, 100%, 0 ) scaleY(0);
+	transform-origin: top;
+	transition: transform 0.1s ease;
 }
 
 .ck-dropdown__panel-visible {
@@ -48,4 +50,6 @@
 
 	/* This will prevent blurry icons in dropdown on Firefox. See #340. */
 	will-change: transform;
+
+ 	transform: translate3d( 0, 100%, 0 ) scaleY(1);
 }

Note: could also work with the max-width trick.

Balloon panel

diff --git a/theme/components/panel/balloonpanel.css b/theme/components/panel/balloonpanel.css
index a25e70c..77c2a9b 100644
--- a/theme/components/panel/balloonpanel.css
+++ b/theme/components/panel/balloonpanel.css
@@ -4,8 +4,10 @@
  */
 
 .ck-balloon-panel {
-	display: none;
+	visibility: hidden;
 	position: absolute;
+	opacity: 0;
+	transition: opacity .1s ease-in-out;
 
 	z-index: var(--ck-z-modal);
 
@@ -48,4 +50,6 @@
 
 .ck-balloon-panel_visible {
 	display: block;
+	opacity: 1;
+	visibility: visible;
 }

cc @dkonopka @Reinmar

[Reinmar]

I love these ideas! Great job already and feel free to research it even more, guys. Please also consider making PRs at the end.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).