Question

我使用jQuery创建了一个span。创建后，span必须缩放很短的时间。我正在使用CSS类来实现所需的效果。它适用于Firefox和Opera，但不适用于webkit浏览器。为什么呢？

这是一个测试用例：

var i = 0;

$(".link").click(function() {
  i++;

  $("#boxes").append("<span class='box' id='" + i + "'>Test</span>");
  $(".box").fadeIn(500);

  setTimeout(function() {
    $(".box[id = " + i + "]").addClass("zoom");
  }, 500);

  setTimeout(function() {
    $(".box[id = " + i + "]").removeClass("zoom");
  }, 900);
})

a {
  display: block;
  height: 40px;
}

body {
  background-color: grey;
}

.box {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
  display: none;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.zoom {
  -moz-transform: scale(1.6);
  -webkit-transform: scale(1.6);
  -o-transform: scale(1.6);
  -ms-transform: scale(1.6);
  transform: scale(1.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="link">Add box</a>

<div id="boxes"></div>

在webkit浏览器中，我的背景图像（不存在于小提琴中）只会消失一秒然后又回来 - 没有缩放，没有任何东西。如你所见，我使用了-webkit-transform，所以必须有另一个原因。

Answer 1

**

选项1

** 看一下这个。 http://jsfiddle.net/Udhby/4/ 注意css的变化。由于您要插入作为内联元素的span，因此转换属性在webkit中无法正常工作。因此，尝试将display：inline-block添加到缩放类

**

选项2

**

而不是使用跨度来使用div。请检查此http://jsfiddle.net/Udhby/5/

-webkit-transform：没有效果，背景变白

1 个答案: