Sfoglia il codice sorgente

Used opacity instead of animation for both in- and out- animation effect.

Aleksander Nowodzinski 5 anni fa
parent
commit
9ae9cba1a0

+ 16 - 13
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -5,7 +5,6 @@
 
 :root {
 	--ck-widget-type-around-button-size: 20px;
-	--ck-widget-type-around-button-fade-in-animation: ck-widget-type-around-button-fade-in var(--ck-widget-handler-animation-curve) var(--ck-widget-handler-animation-duration) 1 normal forwards;
 	--ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
 	--ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
 	--ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
@@ -23,7 +22,10 @@
 		height: var(--ck-widget-type-around-button-size);
 		background: var(--ck-color-widget-type-around-button);
 		border-radius: 100px;
-		animation: var(--ck-widget-type-around-button-fade-in-animation);
+
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
 
 		& svg {
 			width: 10px;
@@ -52,7 +54,7 @@
 			/*
 			 * Display the "sonar" around the button when hovered.
 			 */
-			animation: var(--ck-widget-type-around-button-fade-in-animation), ck-widget-type-around-button-sonar 1s ease infinite;
+			animation: ck-widget-type-around-button-sonar 1s ease infinite;
 
 			/*
 			 * Animate active button's icon.
@@ -70,6 +72,17 @@
 	}
 
 	/*
+	 * Show type around buttons when the widget gets selected or being hovered.
+	 */
+	&.ck-widget_selected,
+	&:hover {
+		& > .ck-widget__type-around > .ck-widget__type-around__button {
+			pointer-events: auto;
+			opacity: 1;
+		}
+	}
+
+	/*
 	 * Styles for the buttons when the widget is NOT selected (but the buttons are visible
 	 * and still can be hovered).
 	 */
@@ -143,13 +156,3 @@
 		box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
 	}
 }
-
-@keyframes ck-widget-type-around-button-fade-in {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}

+ 1 - 11
packages/ckeditor5-widget/theme/widgettypearound.css

@@ -8,7 +8,7 @@
 	 * Styles of the type around buttons
 	 */
 	& .ck-widget__type-around__button {
-		display: none;
+		display: block;
 		position: absolute;
 		overflow: hidden;
 		z-index: var(--ck-z-default);
@@ -38,16 +38,6 @@
 	}
 
 	/*
-	 * Show type around buttons when the widget gets selected or being hovered.
-	 */
-	&.ck-widget_selected,
-	&:hover {
-		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			display: block;
-		}
-	}
-
-	/*
 	 * Hide the type around buttons depending on which directions the widget supports.
 	 */
 	&:not(.ck-widget_can-type-around_before) > .ck-widget__type-around > .ck-widget__type-around__button_before {