万年素人からHackerへの道

万年素人がHackerになれるまで殴り書きするぜ。

  • ・資産運用おすすめ
    10万円は1000円くらい利益
    資産運用ブログ アセマネ
    • ・寄付お願いします
      YENTEN:YYzNPzdsZWqr5THWAdMrKDj7GT8ietDc2W
      BitZenny:ZfpUbVya8MWQkjjGJMjA7P9pPkqaLnwPWH
      c0ban:8KG95GXdEquNpPW8xJAJf7nn5kbimQ5wj1
      Skycoin:KMqcn7x8REwwzMHPi9fV9fbNwdofYAWKRo

    JavaScriptの挙動

    ■以下の2つは挙動が違う
    →「style.visibility」が別オブジェクトになってるから?

    ・その1

    var doc = document;
    var hoge = doc.getElementById("HOGE");
    hoge.style.visibility = "visible";
    

    ・その2(.style.visibilityごと変数へ格納)

    var doc = document;
    var hoge_visibility = doc.getElementById("HOGE").style.visibility;
    hoge_visibility = "visible";
    

    CSS3のアニメーションとvisibilityの関係

    たとえばHOGEのIDにHOGE-Animというアニメーションがついているとする。

    @-webkit-keyframes HOGE-Anim {
        0% {
            -webkit-transform: translate3d(37px, 132px, 0px) scale3d(0.5, 0.5, 1);
            -webkit-animation-timing-function: ease;
        }
    
        100% {
            -webkit-transform: translate3d(37px, 132px, 0px) scale3d(0.55, 0.55, 1);
            -webkit-animation-timing-function: ease-in;
        }
    }
    
    #HOGE {
        -webkit-animation-name: HOGE-Anim;
        -webkit-animation-duration: 0.55s;
        -webkit-animation-delay: 0s;
        -webkit-animation-fill-mode: both;
    }
    

    このようにHOGEをいったん非表示(hidden)にしておいて

    var doc = document;
    var hoge = doc.getElementById("HOGE");
    hoge.style.visibility = "hidden";
    

    あとから、表示(visible)にするとvisibleにした瞬間にアニメーションが開始されます。

    var doc = document;
    var hoge = doc.getElementById("HOGE");
    hoge.style.visibility = "visible";
    

    つまり、hiddenになっている最中の時間に見えないけど再生されていない