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

Posted 2023-02-16

【中文标题】将 Flash 层放置在元素上时保留 CSS 动画

【英文标题】：Keep CSS animation when a Flash layer is placed over element

【发布时间】：2017-01-04 12:16:09

【问题描述】：

我正在使用 ZeroClipboard 库，因为它支持 safari，而其他软件包，例如 clipboard.js 则不支持。 ZeroClipboard 的工作方式是在按钮上放置一个不可见的 flash 组件。虽然这允许按钮保持其由 CSS 设置的初始样式，但它不允许它使用它的样式属性，例如 cursor 和 :active。您可以在下面或JSFiddle

上看到这个

代码 sn-p 似乎不适用于 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 样式？

【参考方案1】：

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

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

不确定 id 是如何生成的，因此在弄清楚如何编写 css 时可能要小心。

【讨论】：

这是一个关于如何做到这一点的好主意，但事实证明这是一种内置的方法。感谢您的回答

【参考方案2】：

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);

可以在here找到相关文档