Question

问题是verride func viewDidLoad() { super.viewDidLoad() if let items = self.TabBar.items as? [UITabBarItem]? { let button = items![1] button.image = button.image?.tabBarImageWithCustomTint(UIColor.redColor()) }属性的值有多个部分，如transform，translate等。

这是关于元素的理论问题，让scale .loader具有transform:translate(10px, 10px)，并且在动画中我要为scale属性设置动画。在这种情况下，浏览器不会使用transform:translate(10px, 10px)，只会使用scale。

我正在寻找解决这个问题的方法。

这是这个问题的一个例子。请注意，我没有寻找这个特定示例的答案（比如：包装元素或将translate值添加到动画定义中）但是通用解决方案（当然，如果存在）

＆＃13;

.loading {
  position: relative;
  width: 100px;
  height: 100px;
  background: #eee;
}
.loading:before,
.loading:after {
  content: "";
  width: 50%;
  height: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  /* the broswer doesn't take this */
  transform: translate(100px, 300px);
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}
.loading:after {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

＆＃13;

<div class="loading"></div>

＆＃13;

Answer 1

通常，当您添加animation并对transform属性进行更改时，基本元素中指定的转换也应该继续存在于动画的关键帧中。也就是说，新的变换（动画的一部分）应该添加到现有的transform之上，而不是覆盖它。以下是应该如何做的。

＆＃13;

.loading {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
}
.loading:before,
.loading:after {
  content: "";
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(100px, 300px);
  animation: bounce 2s infinite ease-in-out;
}
.loading:after {
  animation-delay: -1s;
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0) translate(100px, 300px);
  }
  50% {
    transform: scale(1) translate(100px, 300px);
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="loading"></div>

＆＃13;

我在一个关于在元素上添加多个动画的问题上写了一个类似的答案here，其中每个动画修改transform属性的值独立于另一个。我在这里链接它仅供参考，并且不认为它们是重复的。

如上所述，当您尝试创建动画库或尝试将每个动画拆分为单独的类时，无法将原始变换添加到每个动画的kefyrame中。比如说，您想要将相同的bounce动画添加到多个元素，并且每个元素都有不同的初始transform设置，那么就无法将其添加到动画的关键帧中。

在这种情况下，您仍然可以使用CSS实现所需的输出，但在我看来，使用单个元素完成它将非常困难（

）。

你有什么选择？嗯，有一个选项是你在包装元素上添加动画。

＆＃13;

.loading-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
}
.loading-before, .loading-after {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0px;
  left: 0px;
  animation: bounce 2s infinite ease-in-out;
}
.loading-before:before,.loading-after:before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(100px, 300px);
}
.loading-after {
  animation-delay: -1s;
}
@keyframes bounce {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="loading-wrapper">
  <div class="loading-before"></div>
  <div class="loading-after"></div>
</div>

＆＃13;

解决方案非常通用，可以将其应用于几乎所有此类情况。缺点是如果你想要堆叠多个这样的转换，那么你可能最终会得到多个这样的包装器。除了在动画的关键帧中添加原始变换之外，没有纯CSS方式。

以下代码段是另一个示例。

＆＃13;

.move-n-scale {
  position: relative;
  height: 100px;
  width: 100px;
  background: sandybrown;
  border: 1px solid chocolate;
  transform: scale(0.5);
  animation: move 1s linear infinite alternate-reverse;
}
.move {
  position: relative;
  display: inline-block;
  animation: move-only 1s linear infinite alternate-reverse;
}
.scale {
  position: absolute;
  height: 100px;
  width: 100px;
  top: 0px;
  left: 0px;
  background: sandybrown;
  border: 1px solid chocolate;
  transform: scale(0.5);
}
@keyframes move {
  from {
    transform: translateX(0px) scale(0.5);
  }
  to {
    transform: translateX(300px) scale(0.5);
  }
}
@keyframes move-only {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(300px);
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='move-n-scale'></div>
<div class='move'>
  <div class='scale'></div>
</div>

＆＃13;

注意：为了澄清，我确实注意到你曾提到过不想要一个非常特定于这个问题的解决方案，比如包装等等。但是，我仍然把这个解决方案添加为回答是因为它是我所知道的唯一通用解决方案。我添加了第二个片段只是为了表明它确实是通用的。

Answer 2

您可以删除translate(100px, 300px);中的.loading:after，然后在translate(100px, 300px)中设置@keyframes，如下所示：

@keyframes bounce {
  0%,
  100% {
    transform: scale(0)translate(100px, 300px);
    -webkit-transform: scale(0)translate(100px, 300px);
  }
  50% {
    transform: scale(1)translate(100px, 300px);
    ;
    -webkit-transform: scale(1)translate(100px, 300px);
  }
}

动画变换只有一个属性（缩放）覆盖其他（翻译）

2 个答案: