(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

(vue.js).......

    <div id="test_1">

        <form id="form_1">

            <p>

                price:<input name="price" type="text" v-model="price">

            </p>

            <p>

                cents: <span>{{cents}}</span>

            </p>

        </form>

    </div>

</body>

<script>

    var test_1VM = new Vue({

        el: '#test_1',

        data: {

            cents: 100

        },

        computed: {

            price: {

                set: function(newValue) {

                    this.cents = newValue * 100;

                },

                get: function() {

                    return (this.cents / 100);

                }

            }

        }

    });

</script>

(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