Question

我需要在转换过程中随时暂停CSS转换。我知道有一个计算转换属性的当前值并直接应用它的解决方案，但是这给了我＆＃34;跳跃＆＃34;结果是Safari和IE11。

我的目的是将transition-duration值增加到大的值，这在我的理论中应该几乎暂停过渡，但似乎并非如此：

$('#pause').on('click', function() {
    $('.ball').css('transition-duration: 5000s');
});

还有其他想法吗？谢谢！

Answer 1

<强>转换

解决方案是在停止时删除struct JSON { let json: [String: Any] func value<Value>(_ key: String) throws -> Value { guard let value = json[key] as? Value else { throw NSError() } return value } } protocol JSONDeserializable { init(json: JSON) throws } protocol UserModel: JSONDeserializable { var username: String { get set } // Unwanted requirement (UR) #1: property needs "set" so that it can be initialized within protocol init() // UR2: needs empty init, because of default implementation of `init(json: JSON)` in `extension UserModel` } extension UserModel { init(json: JSON) throws { self.init() // UR3: Needs to call this otherwise compilation error: `'self' used before chaining to another self.init requirement` username = try json.value("username") } } struct UserStruct: UserModel { // UR4: property cannot be `let`, beause of `set` in protocol. var username: String = "" // UR5: Property have to have default value because of it being a empty init init() {} } final class UserClass: NSObject, UserModel { // UR6: analogue with UR4 var username: String = "" // UR7: analogue with UR5 } let json: JSON = JSON(json: ["username": "Sajjon"]) let u1 = try UserStruct(json: json) let u2 = try UserClass(json: json) print(u1.username) // prints "Sajjon" print(u2.username) // prints "Sajjon"类并保存样式的当前状态（transition）。在开始时，只需再次添加margin-left类。

＆＃13;

transition

＆＃13;

var boxOne = document.getElementsByClassName('box')[0];
var running = false;

var toggleTransition = function() {
  if(!running) 
  { 
    boxOne.classList.add('horizTranslate');
  } else {
    var computedStyle = window.getComputedStyle(boxOne),
        marginLeft = computedStyle.getPropertyValue('margin-left');
    boxOne.style.marginLeft = marginLeft;
    boxOne.classList.remove('horizTranslate');    
  }  

  running = !running;
}

＆＃13;

.box {
  margin: 30px;
  height: 50px;
  width: 50px;
  background-color: blue;
}
.box.horizTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
  margin-left: 50% !important;
}

＆＃13;

<强>动画

您可以使用：<div class='box'></div> <button class='toggleButton' onclick='toggleTransition()'>Toggle</button>

例如Javascript：animation-play-state

＆＃13;

document.getElementById('myId').style.animationPlayState = 'paused'

＆＃13;

var toggleAnimation = function(){
  state = document.getElementById('myId').style.animationPlayState == 'paused' ? 'running' : 'paused';
  document.getElementById('myId').style.animationPlayState = state;
}

＆＃13;

div#myId {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    -webkit-animation-play-state: running; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
    animation-play-state: running;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

＆＃13;

如何暂停CSS过渡？

1 个答案: