动画变换只有一个属性（等级）覆盖其他（翻译） [英] Animate transform only one property (scale) override other (translate)

查看：139
本文介绍了动画变换只有一个属性（等级）覆盖其他（翻译）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题是，变换属性值有一个像多个部分翻译，规模等。

这是有关元素的理论问题，让我们 .loader 有变换：翻译（10px的，10px的）而在动画我想动画比例属性。在这种情况下，浏览器不会走变换：翻译（10px的，10px的）键，将只需要在比例 。

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

下面是一个例子了这个问题。请记住这我不是在寻找的答案，这个特殊的例子关注（如：包装元素或添加翻译值，以动画的定义），但一个通用的解决方案（如果存在的，当然）。

\r
\r

.loading {\r
  位置：相对;\r
  宽度：100像素;\r
  高度：100像素;\r
  背景：#eee;\r
}\r
.loading：之前，\r
.loading：{后\r
  内容：;\r
  宽度：50％;\r
  高度：50％;\r
  -moz-边界半径：50％;\r
  -webkit-边界半径：50％;\r
  边界半径：50％;\r
  背景色：#FFF;\r
  不透明度：0.6;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
  / *的broswer不采取这种* /\r
  变换：翻译（100像素，300像素）;\r
  -webkit-动画：反弹2S无限易于在出;\r
  动画：反弹2S无限易于在出;\r
}\r
.loading：{后\r
  -webkit-动画延迟：-1s;\r
  动画延迟：-1s;\r
}\r
@keyframes反弹{\r
  0％，100％{\r
    变换：规模（0）;\r
    -webkit-变换：规模（0）;\r
  }\r
  50％{\r
    变换：规模（1）;\r
    -webkit-变换：规模（1）;\r
  }\r
}

\r

＆LT; D​​IV CLASS =加载＆GT;＆LT; / DIV＆GT;

\r

\r
\r


解决方案

通常，当您添加一个动画与更改变换属性，则是在基本元素中指定的变换也应结转为动画的关键帧中也present。也就是说，新的转换（即是动画的一部分）应加在现有顶变换，而不是覆盖它。下面是它应该怎么做。

\r
\r

.loading {\r
  位置：相对;\r
  宽度：200像素;\r
  高度：200像素;\r
  背景：#eee;\r
}\r
.loading：之前，\r
.loading：{后\r
  内容：;\r
  宽度：50％;\r
  高度：50％;\r
  边界半径：50％;\r
  背景色：#FFF;\r
  不透明度：0.6;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
  变换：翻译（100像素，300像素）;\r
  动画：反弹2S无限易于在出;\r
}\r
.loading：{后\r
  动画延迟：-1s;\r
}\r
@keyframes反弹{\r
  0％，100％{\r
    变换：规模（0）翻译（100像素，300像素）;\r
  }\r
  50％{\r
    变换：规模（1）翻译（100像素，300像素）;\r
  }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; D​​IV CLASS =加载＆GT;＆LT; / DIV＆GT;

\r

\r
\r

我写了一个类似的答案<一个href=\"http://stackoverflow.com/questions/32224802/extend-the-final-state-of-the-first-animation-for-translated-element/32225884#32225884\">here一个有关的元素添加多个动画，每个这些动画修改的质疑变换属性的值相互独立。我在这里连接起来，仅供参考，不认为他们是重复的。

说了上面，加入原转化为每个动画的kefyrames当你试图创建动画库或试图每个动画分割成一个单独的类是不可能的。比方说，您要添加相同反弹动画多个元素和他们每个人都有不同的初始变换然后设置就不可能将它添加到动画的关键帧。

在这种情况下，你仍然可以使用CSS实现所需的输出，但它会（在我看来几乎是不可能的），很难获得其与一个单一的元素来完成的。

你有什么选择？好了，一个选择是为你增添一个包装元素的动画。

\r
\r

.loading-包装{\r
  位置：相对;\r
  宽度：200像素;\r
  高度：200像素;\r
  背景：#eee;\r
}\r
.loading-之前，.loading-后{\r
  位置：绝对的;\r
  宽度：50％;\r
  高度：50％;\r
  顶：0像素;\r
  左：0像素;\r
  动画：反弹2S无限易于在出;\r
}\r
.loading-前：之前，.loading-后：前{\r
  内容：;\r
  宽度：100％;\r
  高度：100％;\r
  边界半径：50％;\r
  背景色：#FFF;\r
  不透明度：0.6;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
  变换：翻译（100像素，300像素）;\r
}\r
.loading-后{\r
  动画延迟：-1s;\r
}\r
@keyframes反弹{\r
  0％，100％{\r
    变换：规模（0）;\r
  }\r
  50％{\r
    变换：规模（1）;\r
  }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; D​​IV CLASS =加载-包装＆GT;\r
  ＆LT; D​​IV CLASS =搬入之前＆GT;＆LT; / DIV＆GT;\r
  ＆LT; D​​IV CLASS =加载-后＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r

解决方案是的是通用并您可以将它应用于几乎所有这类案件。其缺点是，如果你想堆叠多个这种转变那么你很可能有多个这样的包装结束。还有比动画的关键帧也将在原来的转换之间没有纯粹的CSS方法。

以下代码段是另一个样。

\r
\r

.move正大规模{\r
  位置：相对;\r
  高度：100像素;\r
  宽度：100像素;\r
  背景：黄褐;\r
  边框：1px的固体巧克力;\r
  变换：规模（0.5）;\r
  动画：招1秒线性无极交替扭转;\r
}\r
.move {\r
  位置：相对;\r
  显示：inline-block的;\r
  动画：移动-1S仅无限线性复用反向;\r
}\r
.scale {\r
  位置：绝对的;\r
  高度：100像素;\r
  宽度：100像素;\r
  顶：0像素;\r
  左：0像素;\r
  背景：黄褐;\r
  边框：1px的固体巧克力;\r
  变换：规模（0.5）;\r
}\r
@keyframes举动{\r
  从{\r
    变换：translateX（0像素）的规模（0.5）;\r
  }\r
  至 {\r
    变换：translateX（300像素）的规模（0.5）;\r
  }\r
}\r
@keyframes仅布展{\r
  从{\r
    变换：translateX（0像素）;\r
  }\r
  至 {\r
    变换：translateX（300像素）;\r
  }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/$p$pfixfree/1.0.7/$p$pfixfree.min.js\"></script>\r
＆LT; D​​IV CLASS ='移动正大规模'＆GT;＆LT; / DIV＆GT;\r
＆LT; D​​IV CLASS ='移动'＆GT;\r
  ＆LT; D​​IV CLASS ='规模'＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r


  

注意：只是为了澄清，我没有，你大概已经不想要一个解决方案，这是非常具体到这个问题就像把它包装等，但提到的通知，我还增加此溶液作为答案，因为它是我所知道的唯一通用的解决方案。我又增加了第二个片段只显示这是确实是通用的。


The problem is that the transform property's value has multiple part like translate, scale etc.

This is a theoretical question about element, let's .loader that has transform:translate(10px, 10px) and in the animation I want to animate the scale property. In this case, the browser will not take the transform:translate(10px, 10px) and will take only the scale.

I am looking for a way around this problem.

Here is an example to this question. Please, keep attention that I'm not looking for an answer to this particular example (like: wrap the element or add the translate value to the animation definition) but a generic solution (if exist, of course).

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

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

解决方案

Generally when you add an animation with changes to the transform property then the transforms that are specified in the base element should also be carried over to be present within the animation's keyframes also. That is, the new transforms (that are part of the animation) should be added over on top of the existing transform and not overwrite it. Below is how it should be done. 

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

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

I wrote a similar answer here to a question about adding multiple animations on an element with each of those animations modifying the transform property's values independent of the other. I am linking it here only for reference and don't think they are duplicates.

Having said the above, adding the the original transform to each animation's kefyrames is not possible when you are trying to create animation libraries or trying to split each animation into a separate class. Say for example, you want to add the same bounce animation to multiple elements and each of them have a different initial transform setting then it becomes impossible to add it to animation's keyframe.

In such cases, you can still achieve the desired output using CSS but it would be very difficult (almost impossible in my opinion) to get it done with a single element.

What options do you have? Well, one option is for you to add the animation on a wrapper element.

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

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

The solution is quite generic and you can apply it to almost all such cases. The drawback is that if you want to stack multiple such transformations then you'd likely end up with multiple such wrappers. There is no pure CSS way other than adding original transformations within the animation's keyframes also.

The below snippet is another sample.

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

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

Note: Just to clarify, I did notice that you had mentioned about not wanting a solution which is very specific to this problem like wrap it etc. But, I had still added this solution as an answer because it is the only generic solution which I am aware of. I had added the second snippet only to show that is is indeed generic.

这篇关于动画变换只有一个属性（等级）覆盖其他（翻译）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆