如何使SplitLayoutPanel的拖动器闪烁？

Question

所以，我有一个SplitLayoutPanel，需要一个眨眼的拖拉机。是否有可能实现它？使用CSS，硬编码，无论什么？

Answer 1

注意 - 纯css效果将是cpu密集型，因此我会选择基于gif的解决方案。

问题

拆分布局面板使用两个图像来提供horizontal和vertical拆分器。这些是png图像，无法动画（闪烁效果）。

解决方案

使用动画gif图像可以获得闪烁效果。

您需要为闪烁找到替换的“gif”图像。然后覆盖基本的gwt样式，并确保为覆盖的样式添加 !important 后缀。

.gwt-SplitLayoutPanel-HDragger {
  background: #e7e7e7 url(images/thumb_vertical_blinking.gif) center center no-repeat !important;
  cursor: col-resize;
}
.gwt-SplitLayoutPanel-VDragger {
  background: #e7e7e7 url(images/thumb_horz_blinking.gif) center center no-repeat !important;
  cursor: row-resize;
}

Answer 2

是的，有可能通过覆盖默认样式

来实现这一目标

.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-HDragger { horizontal dragger }
.gwt-SplitLayoutPanel .gwt-SplitLayoutPanel-VDragger { vertical dragger }


.gwt-SplitLayoutPanel-VDragger {
       // your set of styles while dragging 
} 

.gwt-SplitLayoutPanel-HDragger {
       // your set of styles while dragging 
}