Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ
Yu Ishihara
December 09, 2018
Design
3
910
シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ
Rails Developers Meetup 2018 Day4 (
https://techplay.jp/event/702297
) 発表資料
Yu Ishihara
December 09, 2018
Tweet
Share
More Decks by Yu Ishihara
See All by Yu Ishihara
0.1ランク上のアイコンの作り方講座
is8r
27
14k
Other Decks in Design
See All in Design
デザイナーからプロダクトマネジメントへの挑戦
fumiko
0
230
はじめまして、株式会社サインコサインです。(2022.07)
kakukoki
PRO
4
4k
The Drop
rootsdrew
1
180
【デザイナー採用】YUMEMI_会社紹介/yumemi_company_introduction_designer
yumemi_design
0
630
Curating the #DuBoisChallenge2022
ajstarks
0
110
DESIGNBASE_Recruit_Book_ver2.1
uzabase
PRO
0
210
Michelle Ou - Belonging in Design.
uxaustralia
PRO
1
170
UXとUIから知るプロダクトデザイン研修
takumasaito
2
230
Nobel Finds a Staryu
innsamity
0
420
The Party! - Story Sequence
diablicos_
0
150
dipp 點譜數位方案
91appguide
1
120
Love Diana-Mermaid Song Sequence
ivettetwin
1
170
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Three Pipe Problems
jasonvnalue
89
8.7k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
Docker and Python
trallard
27
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Designing with Data
zakiwarfel
91
4k
Transcript
ͪΐ͍͠ΞχϝʔγϣϯϨγϐ Yu Ishihara (@is8r_) γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δ Rails Developers Meetup 2018 Day
4 Nouvelle Vague - 2018/12/8
ࣗݾհ @is8r_ ͡Ί·ͯ͠ɻੴݪ༔ͱݴ͍·͢ ੴݪ༔ Yu Ishihara
ϑϦʔϥϯεͰ3BJMT(PͷΞϓϦέʔγϣϯͷσβΠϯͱϑϩϯτͷ͓ࣄΛ͓ͬͯΓ·͢ ࣗݾհ @is8r_ ͦͷଞ͍Ζ͍Ζ || || %FTJHO 'SPOU
࠷ۙϤʔάϧτͮ͘ΓʹϋϚͬͯ·͢ ࣗݾհ μώϤʔάϧτ ΧεϐւϤʔάϧτ ϗʔ ϜϝΠ υέϑ Ο Ξ 3
@is8r_
3VCZ,BJHJͷσβΠϯͷʜ ࠓ͓͍ͤͯͨͩ͘͜͠͞ͱ @is8r_
Λ͠Α͏͔ͱࢥͬͨͷͰ͕͢ͷΛલճͷ3BJMT%.Ͱ͞Μ͕͍ͯͨ͠ͷͰผͷ͓Λʜ ࠓ͓͍ͤͯͨͩ͘͜͠͞ͱ @is8r_
ࠓ͓͍ͤͯͨͩ͘͜͠͞ͱ $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ 3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 @is8r_
γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δɺͪΐ͍͠ΞχϝʔγϣϯϨγϐ $44ΞχϝʔγϣϯɺͳΜͱͳ͘ ඵܾΊ͍ͯΔ
None
None
None
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNTQFFE 4QFFE
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͔݁Βݴ͏ͱTʙT͕ྑ͍ͱ͞Ε͍ͯ·͢ )PXGBTUTIPVMEZPVS6*BOJNBUJPOTCF "EPCFͷ6*Ξχϝʔγϣϯίϯαϧλϯτͷํͷϒϩάهࣄ IUUQTWBMIFBEDPNIPXGBTUTIPVMEZPVSVJBOJNBUJPOTCF 200ms to 500ms seconds is
a good range to start with for interface animations.
0 200 500 1000ms $44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͱ͍͑݁ߏ෯͕͋ΔͷͰɺΓ໎ͬͯ͠·͍·͢ΑͶ
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ϘλϯͳͲɺૢ࡞ͷϑΟʔυόοΫΛײͤ͡͞ΔͨΊͷಈ͖ͳͷͰɺಈ͖͕͍ͱअຐʹײ͡Δ͠ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ Ϣʔβʔͷҙשى͕తͷཁૉʹؔͯ͠ɺಈ͖͕ૣ͍ͱͦͷׂΛՌͨͤͳ͍ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ Ϣʔβʔͷҙשى͕తͷཁૉʹؔͯ͠ɺಈ͖͕ૣ͍ͱͦͷׂΛՌͨͤͳ͍ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ૢ࡞͕Ͱ͖ΔཁૉͰ͋ΔࣄΛࣔͨ͢Ί͚ͩͳͷ͔ ΛҾ͖͍ͨཁૉͷࢹઢͷ༠ಋͳͷ͔ɺ ͋ͨΓΛҙࣝ͢ΔͱܾΊ͍͢Ͱ͢
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ զʑGQTͱGQTͷҧ͍͕Θ͔ΔͷͰɺ͕ใͷؒΛຒΊ͍ͯΔͱ͔͋Γͦ͏͚ͩͲ ਓ͕ೝࣝ͢Δʮ࿈ଓͨ͠ੈքʯݬͰ͋Δͱ͍͏ௐࠪ݁Ռ IUUQTHJHB[JOFOFUOFXTTQPUMJHIUPGBUUFOUJPO ਓؒͷඵؒʹ ճͷҙྗͷഥಈ͕͋Δ 4 1
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͷใߋ৽ʹ͍͍ͩͨNT͘Β͍࣌ؒΛ͔͚ͯͦ͏ 1000/4 = 250ms
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͱ͍͏͜ͱ
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ૢ࡞ײΛମײͤ͞ΔͨΊ͚ͩͷͷʹؔͯ͠োΓʹͳΒͳ͍Α͏ʹɺ NTҎԼΛ҆ʹ͢Δͷ͕ྑͦ͞͏ ͜ͷลʁ 0 250 500 750 1000ms
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ NTͩͱɺλΠϛϯάʹΑͬͯճͷใߋ৽ʹͨͬͯ͠·͏͔͠Εͳ͍ͷͰɺ NT͕ྑͦ͞͏ ms 0 250 500 750 1000
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ʮԿ͔ग़͖ͯͨࣄʯʮԿ͔ಈ͍ͨࣄʯͱ͍͏ࣄΛҙࣝతʹؾ͍ͮͯΒ͍͍ͨͷɺ NTҎ্͕ྑͦ͞͏ ͜ͷลʁ ms 0 250 500 750 1000
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ճͷใߋ৽Ͱݟಀ͢ࣄߟྀͯ͠ɺNT͕ྑͦ͞͏ͳͷͰ ms 0 250 500 750 1000
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͜Μͳײ͡Ͱͷཪ͚Λߟ͑ͯΈΔͱ ͢ΜͳΓܾΊΒΕͦ͏
$44ΞχϝʔγϣϯɺͳΜͱͳ͘ඵܾΊ͍ͯΔ ͍͑ɺͰܾΊͯײ֮తʹͬ͘͠Γ͘Δඵ͕͋Ε ͦΕͰେৎͰ͕͢ɺ ͠໎ͬͨ࣌ʹͪΐͬͱࢥ͍ग़ͯ͠Έ͍ͯͩ͘͞
γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δɺͪΐ͍͠ΞχϝʔγϣϯϨγϐ ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔ Θ͔Βͳ͍
None
None
None
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ ΠʔδϯάΧʔϒɺͨ͘͞Μͨ͘͞Μ͋Γ·͢ΑͶ IUUQTFBTJOHTOFUKB &BTJOH'VODUJPOૣݟද
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ ͪΐͬͱಈ͔ͯ͠Έ·͠ΐ͏ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH &BTJOH'VODUJPOT
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ DVCJDCF[JFSΛ׆༻ͨ͠ΒՃͰ͖Δ&BTJOHGVODUJPOT͋Γ·͢ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH $VTUPN&BTJOH'VODUJPOT
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ #PVODFDVCJDCFTJFSͰ࣮ݱͰ͖ͳ͍Έ͍ͨͰ͢ // from: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_timing-functions.scss // EASE IN $ease-in-quad: cubic-bezier(0.550,
0.085, 0.680, 0.530); $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); // EASE OUT $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); // EASE IN OUT $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); // ͬͪͦ͜ΕͬΆ͍ಈ͖ͳ͚ͩ // (similar elastic). $ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780); $ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780);
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ Ξχϝʔγϣϯʹ͓͚Δͷ๏ଇɻ4MPXJOBOETMPXPVUɺ5JNJOH͋ͨΓΛݟͯΈΔͱΘ͔Γ͍͢ QSJODJQMFTPGBOJNBUJPO IUUQUIFQSJODJQMFTUVNCMSDPN
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔͷɺ ໘ͷ߅Λड͚ͯࢭ·Δͷɺ ࣗͰಈ͖ग़ͯ͠ɺࢭ·Δͷɺ ͋ͨΓ͕ԡ͓͖͍͑ͯͨ͞ϙΠϯτͰ͢ɻ
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ ը໘͔Βফ͍͑ͯ͘ཁૉͱ͔ Կ͔ʹԡ͞Εͯಈ͖࢝ΊΔͷ FBTFJO
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ ը໘ʹೖͬͯ͘Δཁૉͱ͔ɺϘλϯͱ͔ ໘ͳΜ͔ͷ߅Λड͚ͯࢭ·Δͷ FBTFPVU
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ ৳ͼॖΈ͢ΔݕࡧϑΥʔϜͱ͔ ࣗͰಈ͖ग़ͯ͠ɺࢭ·Δͷ FBTFJOPVU
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ Tఔͷಈ͖Ͱҧ͍Θ͔Γʹ͍͘͠ʜ ͱ͍͍ͭͭɺ$44ͷΞχϝʔγϣϯͰ TJOFFYQPͳͲͷΧʔϒͷҧ͍ʹ͍ͭͯ ͋·Γؾʹ͍͍ͤͣͩͨϓϦηοτʹ͋Δͭ͏ͷ͕ྑͦ͞͏
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ ҰԠͬ͘͟Γͱઆ໌Λ͓ͯ͘͠ͱ ೋɺ ࡾɺ ࢛ɺ ޒ࣍ؔ *-quad, *-cubic, *-quart, *-quint
ࡾ֯ؔ *-sine ٸܹͳ *-expo ԁ *-circ
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ FBTFJORVBE͕མͪΔಈ͖ 2VBE མԼͷಈ͖
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ RVBE͔Β RVJOUڧ͕ͪΐͱUҧ͍·͢ ؇͔ ܹ͍͠ Quad Cubic Quart Quint
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ FBTFJOPVUTJOFৼΓࢠͷಈ͖ 4JOF ৼΓࢠͷಈ͖
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ FBTFJOFYQPɺFBTFPVUFYQPɺFBTFJOPVUFYQPٸܹͳಈ͖ &YQP ٸͳಈ͖
ΠʔδϯάɺͲΕΛͬͨΒΑ͍͔Θ͔Βͳ͍ Ҏ্Λ౿·͑ͯߟ͑ΔͱͲΕΛબͿͱྑ͍͔ܾΊ͘͢ͳΓ·͢ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNFBTJOH &BTJOH'VODUJPOT
γϯϓϧͳ3BJMTΞϓϦέʔγϣϯʹҰՃ͑Δɺͪΐ͍͠ΞχϝʔγϣϯϨγϐ 3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳ ͪΐ͍͠Ξχϝʔγϣϯ$44
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 Ϙλϯཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNCVUUPO
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦ʢݟ͍͢Α͏ʹσβΠϯ෦NJYJOʹ͚͓͖ͯ·ͨ͠ʣ .button { @include button-base; @include font; transition: all
0.2s ease-out; }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕͪ͜ΒΛมߋ @mixin button-base { $c: #82ccdd; $t: .2rem;
display: inline-block; position: relative; cursor: pointer; text-align: center; box-sizing: border-box; border: none; outline: none; margin: 0; padding: .5rem 2rem; border-radius: 4rem; transform: translateY(-$t); background-color: $c; color: #fff; box-shadow: 0 $t 0 darken($c, 5%); &:hover { color: #fff; text-decoration: none; transform: translateY(0); box-shadow: 0 0 0 $c; background-color: darken($c, 2%); } } @mixin font($size: 1rem, $line-height: normal, $weight: 400) { font-family: YuGothic, 'ᕟΰγοΫ', sans-serif; font-size: $size; font-weight: $weight; line-height: $line-height; }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 Πϯϓοτཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNJOQVU
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯ෦ @keyframes anim-shake { $m: .3rem; 0% { transform:
translate(0, 0) rotate(0deg); } 25% { transform: translate(-$m, 0) rotate(0deg); } 50% { transform: translate(0, 0) rotate(0deg); } 75% { transform: translate($m, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .input { @include input-base; @include font(.9375rem); &.is-action { $c: $color-red; animation: anim-shake .2s linear 4; border-color: $c; &:focus { border-color: $c; } } }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 σβΠϯଆͷελΠϧ ݟӫ͑Λม͚͑ͨΕͪ͜ΒΛมߋ @mixin input-base { $c: #82ccdd; display: inline-block;
box-sizing: border-box; appearance: none; border: none; outline: none; text-decoration: none; line-height: 1 !important; background-image: none; margin: 0; padding: .6rem .8rem; border: 1px solid #eee; border-radius: .2rem; width: 100%; background-color: #fff; &:focus { border: 1px solid $c; outline: none; } &::placeholder { font-size: inherit; color: #ddd; } }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ༨ஊͰ͕͢ɺEFWJTFͷೝূը໘ͱ͔ɺखൈ͖͠Α͏ͱࢥͬͨΒSBJMTHEFWJTFWJFXT͠ͳͯ͘$44͚ͩ ͰશવσβΠϯ͕ೖΕΒΕ·͢ .field { input[type=text], input[type=email], input[type=password] { @extend
.input; } } .actions { input { @extend .button; width: 100%; } }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 Τϥʔͱ͔Ͱ่ΕͨΓ͢Δͷͱ͔ɺ ͜ͷลʹεϖʔε͕Ͱ͖ͨΓ ͯ͠Δͷҙਤ͠ͳ͍CS͕ٸʹೖͬͯ͘ Δͷ͕
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 $44͚ͩͰҊ֎؆୯ʹௐ͢Δࣄ͕ՄೳͰ͢ .field { label { + br { display:
none; } } input[type=checkbox] { + label { display: inline-block; } } i { + br { display: none; } } } .field_with_errors { i { display: block; } + em { display: inline-block; } + br { display: none; } }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ͋ͱࡉ͔͍ௐΛೖΕ͓͍ͯͨΒʜʢޙͰHJUIVCʹΞοϓ͓͖ͯ͠·͢ʜʣ .field { margin-top: 1rem; label { padding-bottom: .2rem;
display: block; + br { display: none; } } input[type=text], input[type=email], input[type=password] { @extend .input; } input[type=checkbox] { margin-right: .2rem; cursor: pointer; + label { display: inline-block; cursor: pointer; } } em { @include font(.875rem); } i { @include font(.875rem); padding-bottom: .4rem; display: block; + br { display: none; } } } .field_with_errors { $c: $color-red; label { color: $c; margin-bottom: 0; } i { @include font(.875rem); font-style: normal; color: $color-red; padding-bottom: .4rem; display: block; &::before { @include fa('\f071'); margin-right: .4rem; } } + em { display: inline-block; margin-bottom: .5rem; } + br { display: none; } } #error_explanation { $c: $color-red; background-color: lighten($c, 30%); border-bottom: 1px solid lighten($c, 28%); color: $c; margin-top: 1rem; padding: .5rem 1rem; h2 { @include font(.875rem, 1.2rem, bold); margin: 0; } ul { margin: .1rem 0 0 1.5rem; padding: 0; li { @include font(.9375rem); margin-top: .3rem; } } } .actions { margin-top: 1rem; text-align: center; input { @extend .button; width: 100%; } }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ͜͏͍ͬͨͷ͕
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ͜Μͳ͔Μ͡ʹ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNVTFSTTJHO@VQ
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ௨ཁૉ IUUQTQSPUFDUFEGPSFTUIFSPLVBQQDPNOPUJDF
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 Ξχϝʔγϣϯͷ෦ @keyframes anim-notice { 0% { transform: translateY(-100%); opacity:
0; animation-timing-function: ease-out; } 20% { transform: translateY(0%); opacity: 1; } 80% { transform: translateY(0%); opacity: 1; animation-timing-function: ease-in; } 100% { transform: translateY(-100%); opacity: 0; } } .notice { @include font; @include notice-base; animation: anim-notice 3s; }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 σβΠϯͷ෦ @mixin notice-base($c: #82ccdd) { display: block; margin: 0;
padding: 1rem; position: fixed; width: 300px; top: 1rem; left: calc(50% - 150px); text-align: center; background-color: lighten($c, 25%); border-bottom: 1px solid lighten($c, 28%); color: $c; transform: translateY(-100%); opacity: 0; box-shadow: 0 5px 10px rgba(darken($c, 30%), .1); border-radius: .4rem; &:empty { display: none; } }
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ͱ͍͏Θ͚Ͱ؆୯ʹ͑Δ$44ΞχϝʔγϣϯͷখٕΛ ͝հ͍͖ͤͯͨͩ͞·ͨ͠
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ϦϙδτϦͪ͜Β NJYJO͜ͷ͋ͨΓ IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTTUZMFTDPOpH @NJYJOTTDTT IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDUCMPCNBTUFSBQQBTTFUTTUZMFTIFFUTBQQMJDBUJPOTDTT Ξχϝʔγϣϯؔ࿈͜ͷ͋ͨΓ IUUQTHJUIVCDPNJTSSBJMTENTBNQMFQSPKFDU
3BJMTͷαΠτͰؾܰʹ͑ͦ͏ͳͪΐ͍͠Ξχϝʔγϣϯ$44 ͓ࢼ͠Ͱ࡞ΔΞϓϦͷϓϩτλΠϐϯάϋοΧιϯͳΜ͔ͷ εϐʔυউෛͷͰ׆༂͢Δɺϋζ
͍͞͝ʹ ීஈͷҊ݅ͰϝϯςφϯεͷࣄΛߟ͑ͯ ͦΕͧΕͷαΠτʹ͋ͬͨॻ͖ํΛ͠·͢
͍͞͝ʹ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠