Question

我需要停止过渡动画，要做到这一点我只是删除＆＃34;动画＆＃34;用于定义元素转换的css类。它在Chrome和Safari中完美运行，但在Firefox中则不然。为什么会这样？

CSS：

div {
  background-color: green;
  width: 100px;
  height: 100px;
}

.animated {
  transition: width 5s, height 5s;
}

.big {
  width: 200px;
  height: 200px;
}

HTML（需要jQuery）：

<a href="#" onclick="$('div').addClass('big animated')">start</a> | 
<a href="#" onclick="$('div').removeClass('animated')">stop</a>
<div></div>

Codepen： https://codepen.io/anon/pen/KQPJmo

Answer 1

这应该可以解决问题：

添加.notransition类，而不是删除.animated类：

的CSS：

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

HTML：

<a href="#" onclick="$('div').addClass('notransition')">stop</a>

示例（适用于Firefox）： https://jsfiddle.net/v149sht6/4/

removeClass不会在Firefox中停止转换

1 个答案: