如何让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 
}