当Flash层放置在元素上时，保留CSS动画

Keep CSS animation when a Flash layer is placed over element

本文关键字：保留 CSS 动画 元素 Flash      更新时间：2023-09-26

我使用的是ZeroClipboard库，因为它支持safari，而其他包，如clipboard.js则不支持。ZeroClipboard的工作方式是在按钮上放置一个不可见的闪光组件。虽然这允许按钮保持其初始样式设置的CSS，它不允许它使用它的样式属性，如cursor和:active。您可以在下面或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样式中保留功能?

你可以把样式放在flash对象本身而不是按钮上。或者同时使用多个选择器:

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

不确定id是如何生成的，所以在确定如何编写css时可能要小心。

ZeroClipboard有一个类.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);
}

相关文档可以在这里找到

相关文章：