railsアプリを作っているのですが、アニメーションが反映されません。
プレビューをみてみると次のようなエラーが出てしまいます。
Invalid CSS after " $containerWidth ": expected ":", was "= 740px"
HTML
1<div id="root" class="root"> 2 <div class="container"> 3 <div class="header"> 4 <div class="menu"> 5 <span class="hamb"> 6 <span class="row"></span> 7 <span class="row"></span> 8 <span class="row"></span> 9 </span> 10 </div> 11 <svg class="curve-background"> 12 <path class="curve-open" 13 fill="#313131" 14 d="M740,60 L740,0 680,0 C690,50, 690,50 740,60"/> 15 <path class="curve-close" 16 fill="#FFD34E" 17 d="M0,405 L0,405 740,405 740,405 C370,440 370,440 740,405"/> 18 </svg> 19 <div class="search"> 20 <svg class="search-icon" enable-background="new 0 0 50 50" height="34px" 21 viewBox="0 0 50 50" width="34px"> 22 <rect fill="none" height="50" width="50"/> 23 <circle cx="21" cy="20" fill="none" r="15" stroke="#fff" stroke-width="5"/> 24 <line class="search-line" fill="none" stroke="#fff" stroke-width="5" x1="32.229" x2="49.9" y1="32.229" y2="49.9"/> 25 </svg> 26 <span class="close">✖</span> 27 </div> 28 29 </div> 30 <div class="text"> 31 <h1 class="search-text">search</h1> 32 <input type="text" class="search-input"/> 33 </div> 34 <div class="intro"> 35 <h1>Click Search Button</h1> 36 </div> 37 <div class="footer"> 38 <ul class="list"> 39 <li class="list-item"></li> 40 <li class="list-item"></li> 41 <li class="list-item"></li> 42 <li class="list-item"></li> 43 <li class="list-item"></li> 44 <li class="list-item"></li> 45 <li class="list-item"></li> 46 </ul> 47 </div> 48 </div> 49</div>
scss
1$containerWidth = 740px 2$containerHeight = 435px 3$buttonWidth = 60px 4$footerHeight = 30px 5@import url(https://fonts.googleapis.com/css?family=Roboto:500,500italic,400,400italic,300,300italic); 6@keyframes search-open { 7 50% { 8 transform translate3d(-350px, 187px,0) rotate(180deg) 9 } 10 100% { 11 transform translate3d(-225px, 187px,0) rotate(360deg) 12 } 13} 14@keyframes search-close { 15 0%{ 16 transform translate3d(-225px, 187px,0) rotate(0deg) 17 } 18 100%{ 19 transform translate3d(0px,0px,0) rotate(360deg) 20 } 21} 22* 23 box-sizing border-box 24html 25body 26 height 100% 27body 28 margin 0 29 padding 0 30 background #FFD34E 31 font-family 'Roboto', serif 32#root 33 display flex 34 height inherit 35.container 36 width $containerWidth 37 height $containerHeight 38 background #FFD34E 39 margin auto 40 box-shadow 0 0 20px 5px rgba(0,0,0,.2) 41 display flex 42 flex-direction column 43 justify-content space-between 44 position relative 45 .curve-background 46 overflow hidden 47 position absolute 48 width $containerWidth 49 left 0 50 height $containerHeight - $footerHeight 51 /.search-open & .curve-close 52 opacity 0 53 /.search-close & .curve-close 54 opacity 1 55 .header 56 display flex 57 justify-content space-between 58 .menu 59 .search 60 width $buttonWidth 61 height $buttonWidth 62 background #313131 63 transition background .5s ease-out 0s 64 z-index 50 65 position relative 66 cursor pointer 67 /.search-open & 68 background #FFD34E 69 /.search-close & 70 background #313131 71 .close 72 opacity 0 73 font-size 2.5rem 74 color white 75 position absolute 76 left 15px 77 top 0 78 /.search-open & 79 opacity 1 80 /.search-close & 81 opacity 0 82 .menu 83 border-bottom-right-radius 50% 84 text-align center 85 line-height 70px 86 .hamb 87 display inline-block 88 width 30px 89 height 18px 90 line-height 0 91 .row 92 display inherit 93 background #fff 94 height 4px 95 margin-bottom 3px 96 width 100% 97 .search 98 border-bottom-left-radius 50% 99 text-align center 100 padding 13px 0 101 circle 102 .search-line 103 stroke white 104 transition stroke .4s ease-out 105 /.search-open & .search-icon 106 animation search-open 1s forwards 107 circle 108 .search-line 109 stroke #313131 110 /.search-close & .search-icon 111 animation search-close .5s forwards 112 circle 113 .search-line 114 stroke white 115 .text 116 text-align center 117 color white 118 z-index 10 119 font-size 1.3rem 120 margin-top -90px 121 transition opacity .5s ease-in 122 .search-input 123 height 40px 124 border none 125 border-radius 3px 126 width 0 127 transition all .5s ease-out .4s 128 padding 0 129 /.search-open & 130 width 270px 131 /.search-close & 132 transition all 0s 133 width 0 134 .search-text 135 transform translate(0, 40px) 136 margin 0 137 transition all .5s ease-out .4s 138 opacity 0 139 margin-bottom 10px 140 /.search-open & 141 opacity 1 142 transform translate(0,0) 143 /.search-close & 144 transition all 0s 145 transform translate(0, 40px) 146 opacity 0 147 .intro 148 color white 149 text-align center 150 position absolute 151 top 165px 152 width 100% 153 transition opacity .3s ease-in 154 /.search-open & 155 opacity 0 156 /.search-close & 157 opacity 1 158 .footer 159 background white 160 height $footerHeight 161 text-align center 162 line-height @height 163 .list 164 margin 0 165 padding 0 166 display inline-block 167 list-style none 168 .list-item 169 display inline-block 170 width 7px 171 height 7px 172 border-radius 7px 173 margin-right 15px 174 background silver 175 176 177 178
js
1window.requestAnimFrame = (function() { 2 return window.requestAnimationFrame || 3 window.webkitRequestAnimationFrame || 4 window.mozRequestAnimationFrame || 5 window.oRequestAnimationFrame || 6 window.msRequestAnimationFrame || 7 function(callback) { 8 window.setTimeout(callback, 1000 / 60); 9 }; 10})(); 11window.onload = ()=>{ 12 let $search = document.querySelector('.search'); 13 let $root = document.querySelector('.root'); 14 let $curveOpen = document.querySelector('.curve-open'); 15 let $curveClose = document.querySelector('.curve-close'); 16 let stateOpen = {topPointX:680, 17 bottomPointY:60, 18 curvePointX:690, 19 curvePointY:50}; 20 let propsOpen = {topPointX:-150, 21 bottomPointY:500, 22 curvePointX:-150, 23 curvePointY:450}; 24 let stateClose = { 25 leftPointY:405, 26 rightPointY:405, 27 curvePointY:500 28 }; 29 let propsClose = { 30 leftPointY:0, 31 rightPointY:0, 32 curvePointY:0 33 }; 34 let drawClose = ({leftPointY,rightPointY,curvePointY}) =>{ 35 $curveClose.setAttribute('d',`M0,${leftPointY} L0,405 740,405 740,${rightPointY} C370,${curvePointY} 370,${curvePointY} 0,${leftPointY}`) 36 }; 37 let drawOpen = ({topPointX, bottomPointY, curvePointX, curvePointY})=>{ 38 $curveOpen.setAttribute('d',`M740,${bottomPointY} L740,0 ${topPointX},0 C${curvePointX},${curvePointY} ${curvePointX},${curvePointY} 740,${bottomPointY}`) 39 }; 40 $search.addEventListener('click',()=>{ 41 let classes = $root.classList; 42 if(classes.contains('search-open') && classes.contains('search-close')){ 43 classes.remove('search-close'); 44 animate(300, drawOpen, stateOpen, propsOpen); 45 }else if(classes.contains('search-open')){ 46 classes.add('search-close'); 47 animate(300, drawClose, stateClose, propsClose); 48 }else{ 49 classes.add('search-open'); 50 animate(300, drawOpen, stateOpen, propsOpen); 51 } 52 }); 53 let animate = (time, draw, state, props) =>{ 54 let fCount = 1; 55 let start = performance.now(); 56 let framesCount = time/(1000 / 60); 57 let keys = Object.keys(props); 58 let deltaState = {}; 59 let stepState = {}; 60 keys.map((i)=>{ 61 (state[i] < props[i])? 62 deltaState[i] = (props[i] - state[i]) 63 :deltaState[i] = -(state[i] - props[i]) 64 }); 65 let _animate = (timestamp) =>{ 66 if((timestamp - start) < time){ 67 keys.map((j)=>{ 68 stepState[j] = state[j] + (deltaState[j]*(fCount/framesCount)) 69 }); 70 draw(stepState); 71 fCount++; 72 requestAnimFrame(_animate) 73 }else{ 74 if(fCount <= framesCount){ 75 draw(props); 76 } 77 } 78 }; 79 requestAnimFrame(_animate); 80 } 81}; 82
試してみたこと
エラーが出ている文章をコメントアウトしてみた
bundle updateをしてみた
自分なりの考察
単純に今では使われていない書き方なのかな?
ググってみたのですが、答えが得られなかったので質問させていただきました。ご教授いただけたら幸いです????♂️
足りない情報などありましたらおっしゃってください!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/02 03:27