关于CSS动画几点要注意的地方

关于CSS动画几点要注意的地方

js操作transition无效果

先看这个demo以及stackoverflow的问题

http://jsfiddle.net/ThinkingStiff/QNnnQ/

http://stackoverflow.com/q/8210560/918414

怪异的是这个demo在本地chrome上第一个fade-in 不能执行， 所以不明白为什么jsfiddle上是Ok的...

如果你想用js 去操作css的transition 它必须放在异步的函数里面

不论是操作class名还是直接在style里面写属性 都是如此

你可以将这些操作放在事件处理函数中，或者setTimeout中

    // box.style.cssText('transition: 200ms; margin-left: 50%');//这样不行  非要放在异步函数中//比如setimeout  事件回调函数等
    // box.classList.add('trans');//也不行
    // box.classList.add('changeColor');//Ok animation则不受影响

    setTimeout(function() {
        // box.style.transitionProperty = 'all';
        // box.style.transitionDuration = '1s';
        // box.style.left = '50px';
        // box.style.top = '50px';
        // 或者更简单些
        box.style.cssText = 'transition: 500ms; left: 50px;';//ok
        // box.classList.add('trans2');//ok
    }, 0);
    box.addEventListener('transitionend', function() {
        console.log('end');//如果transition里面有2个属性  那么这个时间会触发两次
    }, false);

    #box {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background: #0F0;
        opacity: 0.5;
    }

    #box.trans {
        opacity: 1;
        transition:         opacity 2s;
        -moz-transition:    opacity 2s;
        -ms-transition:     opacity 2s;
        -o-transition:      opacity 2s;
        -webkit-transition: opacity 2s;
    }
    #box.trans1{
        left: 50px;
        top:50px;
        transition:         all 2s;
        -moz-transition:    all 2s;
        -ms-transition:     all 2s;
        -o-transition:      all 2s;
        -webkit-transition: all 2s;
    }
    /*OR 更细致一点*/
    #box.trans2{
        left: 50px;
        top:50px;
        transition:         left 2s, top 2s;
        -moz-transition:    left 2s, top 2s;
        -ms-transition:     left 2s, top 2s;
        -o-transition:      left 2s, top 2s;
        -webkit-transition: left 2s, top 2s;
    }

    @-webkit-keyframes changeColor {
        0% {
            background: #206a11;
        }
        50% {
            background: #012c1a;
        }
        100% {
            background: #206a9e;
        }
    }

    .changeColor {
        -webkit-animation: changeColor 3.4s infinite;
    }

暂停一个动画

对于animation来说很好处理

element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";

More

http://tutorialspark.com/css3/CSS3_Animation_Pause_Resume_Demo.php

可惜只能用在animation上 对于transition的停止就不能使用这样的属性了

搬运

https://css-tricks.com/controlling-css-animations-transitions-javascript/

可以再想要停止的时刻 去除transition这个属性就行 不论是改cssText 还是操作className都可以

var boxOne = document.getElementsByClassName('box')[0],
    $boxTwo = $('.box:eq(1)');

document.getElementsByClassName('toggleButton')[0].onclick = function() {
  if(this.innerHTML === 'Play')
  {
    this.innerHTML = 'Pause';
    boxOne.style.cssText = 'transition: 2s; margin-left: 50%';
    // 向style中填css  添加class名字都是可以的
    // boxOne.classList.add('horizTranslate');
  } else {
    this.innerHTML = 'Play';
    var computedStyle = window.getComputedStyle(boxOne),
        marginLeft = computedStyle.getPropertyValue('margin-left');
    // boxOne.style.marginLeft = marginLeft;
    // boxOne.classList.remove('horizTranslate');
    boxOne.style.cssText = 'margin-left:' + marginLeft;
    // boxOne.style.animationPlayState = "paused";//只能停下animation  transition是不能停的
  }
}