(css, js)transition開發要注意的

1.
style.transition 與 style.transitionProperty 間的關係

若設置 style.transitionProperty, style.transition 有些瀏覽器會讀不到數據
但若設置  style.transition, style.transitionProperty會讀到數據

2.
設置多個動畫項目及使 duration 相同，但會根據項目數量，啟動多次的 transitionEnd

3.
多個動畫項目對應數目少於其量的 transitionDuration會如何設定

https://lightwave88.blogspot.tw/2017/03/csstransition.html

4.
什麼情況不會啟動 transitionEnd(不會動畫)

#display: none

#duration: 0s (即使設置 delay都不會動畫)

#屬性沒有變動

opacity: 0, visibility: hidden => 都會造成運動

5.
對正在的動畫，如何接續另一個新動畫

a.去除 transition 設定

b.// 重設(style)屬性
element.style.top=getComputedStyle(element).top;


參考

http://easings.net/zh-cn
http://cubic-bezier.com/#.17,.67,.83,.67

(js)草稿: promise to deferred

function PDeferred() {

    debugger;

    this.core;

    this.res;

    this.rej

    function init(_obj) {

        debugger

        return new Promise(function (res, rej) {

            debugger;

            _obj.setResolve(res);

            _obj.setReject(rej);

        })

    }

    this.core = init(this);

}

(function(){

    this.then = function(fn_1, fn_2){

        debugger;

        return this.core.then(fn_1, fn_2);

    }

    this.resolve = function(){

        debugger;

        this.res();

    }

    this.reject = function(){

        debugger;

        this.rej();

    }

    this.setResolve = function(res){

        this.res = res;

    }

    this.setReject = function(rej){

        this.rej = rej;

    }

    this.promise = function(){

        return this.core;

    }

}).call(PDeferred.prototype);

function job_1(){

    debugger;

    var def = new PDeferred();

    setTimeout(function() {

        def.resolve();

    }, 1000);

    return def.promise();

}

job_1().then(function(){

    var def = new PDeferred();

    console.log('then_1 start');

    setTimeout(function() {

        console.log('then_1 end');

        def.resolve();

    }, 1000);

    return def.promise();

}).then(function(){

    console.log('then_2');

});

transition-timing-function

http://easings.net/zh-cn

JQ

緩動函數指定動畫效果在執行時的速度，使其看起來更加真實。

現實物體照著一定節奏移動，並不是一開始就移動很快的。當我們打開抽屜時，首先會讓它加速，然後慢下來。當某個東西往下掉時，首先是越掉越快，撞到地上後回彈，最終才又碰觸地板。

本頁可以在每次你需要時，幫助你找到想要的緩動函數。

linear

css+js

• easeInSine

• easeOutSine

• easeInOutSine

• easeInQuad

• easeOutQuad

• easeInOutQuad

• easeInCubic

• easeOutCubic

• easeInOutCubic

• easeInQuart

• easeOutQuart

• easeInOutQuart

• easeInQuint

• easeOutQuint

• easeInOutQuint

• easeInExpo

• easeOutExpo

• easeInOutExpo

• easeInCirc

• easeOutCirc

• easeInOutCirc

• easeInBack

• easeOutBack

• easeInOutBack

js

• easeInElastic

• easeOutElastic

• easeInOutElastic

• easeInBounce

• easeOutBounce

• easeInOutBounce

CSS

ease,linear,ease-in,ease-out,ease-in-out, cubic-bezier