Question

如何使用JavaScript控制CSS Animations和Transitions

Answer 1

你好，

这个问题稍微有点宽泛，我大概描述一下我的理解。

首先，JS控制CSS（style）属性，通常我们这么写：

testNode.style.display = 'block'; // 设置testNode元素的display样式为block

对应到设置CSS3的动画属性，应该是这样的：

// CSS3动画名称slidedown，这个由编写CSS动画的时候确定，独立属性：animation-name
// CSS3动画执行时长（0.2s）,独立属性：animation-duration
// CSS3动画曲线函数（控制速度变化）ease-out，独立属性：animation-timing-function
testNode.style.animation = 'slidedown .2s ease-out';

根据以上注释，显而易见，我们也可以对独立属性进行设置，方法雷同：

testNode.style.animationName = 'slideup';
testNode.style.animationDuration = '.5s';

以上，便可以实现JS对CSS3 Animation属性的控制。然而，由于CSS3是新的标准，在一些旧版浏览器中并未实现支持，因此我们需要考虑兼容性，比如有些浏览器需要添加前缀-webkit-，另一些需要加前缀-moz-，还有-ms-、-o-等。

因此可以提供以下JS方法处理前缀问题：

function prefix(prop) {
    var div = document.createElement('div');
    var style = div.style;
    var firstChar = prop.slice(0, 1).toUpperCase();
    var upperProp = firstChar + prop.slice(1);
    var rs;
    if (('webkit' + upperProp) in style) {
        rs = 'webkit' + upperProp;
    } else if (('moz' + upperProp) in style) {
        rs = 'moz' + upperProp;
    } else if (('o' + upperProp) in style) {
        rs = 'o' + upperProp;
    } else if (('ms' + upperProp) in style) {
        rs = 'ms' + upperProp;
    } else {
        rs = prop;
    }
    return rs;
}

然后设置属性的时候可以按以下方式调用：

testNode.style[prefix('animationName')] = 'fadeout';
testNode.style[prefix('animationTimingFunction')] = 'linear';

好了，大概就是这样，Transition、Transform的处理方式类似~

希望是你想要的答案，有问题可追问。

Answer 2

Animations 可以用jq来控制动画： 

$('a').stop(true).animate({width: '+=20px'}, 5000);
$('a').stop(true).animate({height: '+=20px'}, 5000);

Answer 3

你这问题问的有点模糊不清，没有具体的例子吗？