Question

在我的元素上，我有一个CSS动画，只要它有一个特定的类（wiggle），并且只要它有一个不同的（right），就会运行：

<div class="outer">
  <div class="inner wiggle"></div>
</div>

@keyframes wiggle {
  from {
    left: 10%;
  }
  50% {
    left: 30%;
  }
  to {
    left: 10%;
  }
}

.inner {
  left: 0;

  &.wiggle {
    animation: wiggle 2s infinite;
  }

  &.right {
    left: 90%;
    transition: left 2s;
  }
}

现在，如果删除wiggle课程并同时添加right，则过渡不会发生; left: 90%立即适用。但是，如果在删除前者和添加后者之间存在延迟，则转换将按预期发生。

Here's a JSFiddle illustrating the issue.

看起来当来自动画时，值（例如本例中的left）没有明确的值来转换，因此它们只是呈现给它们的最终状态

这是预期的行为，即它是规范的一部分吗？或浏览器是否可以自由处理该案例？

我已经在最新版本的Firefox和Chromium上进行过测试。

澄清： 我主要不是在寻找解决方法，尤其是不是复杂的解决方法，但更多的原因为什么确切地说浏览器的行为与他们一样

Answer 1

我认为这可能是浏览器渲染中的一个错误，但是如果你想要一个解决方案我可以用%% Set the parameters of the run n_neurons = 50; % Number of neurons n = 1000; % Total number of samples ne = 500; % Number of epochs %% Create the samples % Allocate memory u = zeros(1, n); x = zeros(1, n); y = zeros(1, n); % Initialize u, x and y u(1)=randn; x(1)=rand+sin(u(1)); y(1)=x(1); % Calculate the samples for i=2:n u(i)=randn; x(i)=.8*x(i-1)+sin(u(i)); y(i)=x(i); end %% Create the datasets X=num2cell(u); T=num2cell(y); %% Train and simulate the network % Create the net and apply the selected parameters net = newelm(X,T,n_neurons); % Create network net.trainParam.epochs = ne; % Number of epochs %% This seems to be ignored net.divideFcn = 'divideind'; net.divideParam.trainInd = 1:800; net.divideParam.valInd = 801:900; net.divideParam.testInd = 901:1000; [net,tr]= train(net,X,T);

给你一个替代方法

适合你的小提琴：

transform

$('#toggle').click(() => {
  $('.inner').removeClass('wiggle').addClass('right');
});

@keyframes wiggle {
  from {
    left: 10%;
  }
  50% {
    left: 30%;
  }
  to {
    left: 10%;
  }
}

.outer {
  height: 5em;
  background-color: black;
  position: relative;
}

.inner {
  height: 100%;
  width: 10%;
  position: absolute;
  transform: translate(0%);
  background-color: green;
  transition: transform 2s ease-in-out;
}

.inner.wiggle {
  animation: wiggle 2s infinite;
}

.inner.right {
  transform: translate(900%);
}

我希望这对你有所帮助。

Answer 2

它看起来是预期的行为。我认为当您使用right添加left:90%类时，它无法选择left css属性的起始值。作为替代方案，您可以为.right类

创建另一个关键帧

$('#toggle').click(() => {
  $('.inner').removeClass('wiggle').addClass('right');
});

@keyframes wiggle {
  0% {
    left: 10%;
  }
  50% {
    left: 30%;
  }
  100% {
    left: 10%;
  }
}

@keyframes right {
  100% {
    left: 90%;
  }
}

.outer {
  height: 5em;
  background-color: black;
  position: relative;
}

.inner {
  height: 100%;
  width: 10%;
  position: absolute;
  left: 0;
  background-color: green;
  transition: left 2s;
}

.wiggle {
  animation: wiggle 2s infinite;
}

.right {
  animation: right 2s forwards;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
  Animated
</h2>
<div class="outer">
  <div class="inner wiggle"></div>
</div>
<h2>
  Not animated
</h2>
<div class="outer">
  <div class="inner"></div>
</div>
<hr>
<button id="toggle">
move right
</button>

Answer 3

这个解决方法可能对你有所帮助，想法是使用css variables，想法是用另一个函数设置动画，所以这样我们只需要From和To ...我们需要为每次迭代设置和事件，这样我们就知道迭代何时结束，

因此，当我们点击按钮时，您可以更改变量值并删除类......

＆＃13;

$('#toggle').click(() => {
  $('.inner').addClass('right');
});
let flag = false;
$(".inner").on("animationiteration webkitAnimationIteration oAnimationIteration MSAnimationIteration", function(){ 
  flag && $(".inner").removeClass('wiggle');
  if($(".inner").hasClass('right')) flag = true;  
});

＆＃13;

:root {
     --from: 10%;
     --to: 30%;
   }
   
   
@keyframes wiggle {
  from {
    left: var(--from);
  }

  to {
    left: var(--to);
  }
}

.outer {
  height: 5em;
  background-color: black;
  position: relative;
}

.inner {
  height: 100%;
  width: 10%;
  position: absolute;
  transform: translate(0%);
  background-color: green;
  transition: transform 2s ease-in-out;
  left:90%;
}

.inner.wiggle {
  left:10%;
  animation: wiggle 1s infinite;
  animation-direction: alternate;
}

.inner.right {
  --to:90%;
  animation-direction: normal;
  animation-duration:2s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
  Animated
</h2>
<div class="outer">
  <div class="inner wiggle"></div>
</div>
<hr>
<button id="toggle">
move right
</button>

＆＃13;

当动画回到起点时，请注意这有一个错误......

动画后立即过渡

3 个答案: