Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ハンドメイド now loading

goma
May 25, 2019

ハンドメイド now loading

2019/05/25 Tech美られでぃ #1

goma

May 25, 2019
Tweet

More Decks by goma

Other Decks in Programming

Transcript

  1. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    !LFZGSBNFT໊લ\ ^ ͲͷλΠϛϯάͰɺ Ͳ͏͍͏ܗʹͳ͍ͬͯΔ͔
 ઃఆ͢Δ
  2. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    !LFZGSBNFT໊લ\ ^ \ XJEUIQY ^ \ XJEUIQY ^
  3. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOϓϩύςΟ

    ࢦఆ !LFZGSBNFT໊લ\ ^ \ XJEUIQY ^ \ XJEUIQY ^
  4. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOMPOHFS

    ࢦఆ !LFZGSBNFTMPOHFS\ ^ \ XJEUIQY ^ \ XJEUIQY ^
  5. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOTIBLF

    !LFZGSBNFTMPOHFS\ ^ มԽʹ͍ͭͯઃఆ ͲΕ͘Β͍ͷ଎͞Ͱʁ ΪϡΠʔϯͬͯมΘΔʁҰఆʹมΘΔʁ ΤϯυϨεͰʁ \ XJEUIQY ^ \ XJEUIQY ^
  6. JOEFYDTT CSSΞχϝʔγϣϯͷ࡞Γํ ର৅%0.DMBTT\ جຊͷܗ XJEUI IFJHIU CBDLHSPVOEDPMPSʜ  ^ BOJNBUJPOMPOHFSFBTFJOPVUTJOpOJUF;

    !LFZGSBNFTMPOHFS\ ^ -> ΪϡΠʔϯͱ2ඵ͔͚ͯແݶ࠶ੜ ※ৄࡉׂѪ \ XJEUIQY ^ \ XJEUIQY ^
  7. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center

    kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div>
  8. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center

    kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div> .upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •
  9. Vue.js
 ࣮ߦλΠϛϯάΛࢦఆ͢ΔΫϥε <transition name="upper"> <div v-if="loading" class="loading-screen shutter"> <div class="center

    kanban"> <div class="himo"></div> <div class="board"> <p>४උத</p> </div> </div> </div> .upper-enter-active { animation: upper-in 5s; } .upper-leave-active { animation: upper-in 5s reverse; } @keyframes upper-in { 0% { height: 0; } 100% { height: 100vh; } } •