在元素上放置 Flash 层时保持 CSS 动画

Question

我正在使用 ZeroClipboard library as it supports safari whereas other packages, such as clipboard.js don't. The way ZeroClipboard works is it places an invisible flash component over the button. Whilst this allows the button to keep its initial style set by the CSS, it does not allow it to use it style properties such as cursor and :active. You can see this ~~below~~ or on this JSFiddle

代码片段似乎不适用于 ZeroClipboard。有关工作示例，请参阅 JSFiddle

ZeroClipboard.config({swfPath: "https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf"});
var client = new ZeroClipboard($("#copyH"));

body {
  background: grey;
}

h1.copybtn {
  background: #4942ff;
  display: inline-block;
  padding: 2px;
  border-style: solid;
  border-width: 1px;
  border-color: white;
  cursor: pointer;
  color: white;
  -webkit-transition: all 0.25s !important;
  -moz-transition: all 0.25s !important;
  -o-transition: all 0.25s !important;
  transition: all 0.25s !important;
  font-size: 1.2em;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
}
h1.copybtn:active {
  -webkit-box-shadow: -1px -1px 4px #7f7aff;
  -moz-box-shadow: -1px -1px 4px #7f7aff;
  box-shadow: -1px -1px 4px #7f7aff;
  -webkit-transform: translate(1px, -4px);
  -moz-transform: translate(1px, -4px);
  -o-transform: translate(1px, -4px);
  transform: translate(1px, -4px);
  -webkit-transition: all 0.25s !important;
  -moz-transition: all 0.25s !important;
  -o-transition: all 0.25s !important;
  transition: all 0.25s !important;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>

<h1 class="copybtn" data-clipboard-text="Won't copy">Has effects working</h1>
<br>
<h1 id="copyH" class="copybtn" data-clipboard-text="Will copy">Has copy working</h1>

有没有一种方法可以保留包的功能和 CSS 样式？

Answer 1

您可以将样式放在 Flash 对象本身而不是按钮上。或者甚至同时使用多个选择器：

#global-zeroclipboard-flash-bridge, #copyH { cursor:pointer; }

不确定 ID 是如何生成的，因此您在确定如何编写 css.

时可能需要注意这一点

Answer 2

ZeroClipboard 有一个 class .zeroclipboard-is-active 可以让这个例子正常工作。

例如，代码可以重写为

&:active, &.zeroclipboard-is-active {
  @include box-shadow(-1px -1px 4px #7f7aff);
  @include transform(translate(1px, -4px));
  @include transition(all 0.25s !important);
}

可找到相关文档 here

在元素上放置 Flash 层时保持 CSS 动画

Keep CSS animation when a Flash layer is placed over element

html

javascript

css

flash

jquery