|
53 | 53 | position: relative; |
54 | 54 | width: 100%; |
55 | 55 | height: 100%; |
56 | | - transform: translateY(-3px); /* account for the height of the clock hands */ |
| 56 | + /* transform: translateY(-3px); /* account for the height of the clock hands */ |
| 57 | + /* canceled according to https://github.com/soyaine/JavaScript30/issues/55 */ |
57 | 58 | } |
58 | 59 |
|
59 | 60 | .hand { |
|
87 | 88 | 0 0 0 2px rgba(0,0,0,0.1), |
88 | 89 | 0 0 10px rgba(0,0,0,0.2); |
89 | 90 | transform: translate(-50%, -50%); |
90 | | - /*transition: all .05s;*/ |
91 | | - |
92 | 91 | } |
93 | 92 |
|
94 | 93 | .hour-hand { |
|
104 | 103 | width: 45%; |
105 | 104 | height:5px; |
106 | 105 | margin-top: -2.5px; |
107 | | - transition: all .1s; |
| 106 | + transition: all .1scubic-bezier(0.9,0.54,0.26,1.68); |
108 | 107 | } |
109 | 108 |
|
110 | 109 | .second-hand { |
111 | 110 | height: 2px; |
112 | 111 | margin-top: -1px; |
113 | 112 | border-bottom-left-radius: 100%; |
114 | 113 | border-top-left-radius: 100%; |
115 | | - transition: all .05s; |
| 114 | + transition: all .05scubic-bezier(0.9,0.54,0.26,1.68); |
116 | 115 | background-color: red; |
117 | 116 | } |
118 | 117 |
|
|
141 | 140 | // 解决指针跳顿问题【第一种方法】 |
142 | 141 | // 在发生跳顿的角度值处,将 CSS 的 `transition` 属性去掉 |
143 | 142 | if (secondDeg === 90) secHand.style.transition = 'all 0s'; |
144 | | - else secHand.style.transition = 'all 0.05s'; |
| 143 | + else secHand.style.transition = 'all 0.05s cubic-bezier(0.9, 0.54, 0.26, 1.68)'; |
145 | 144 |
|
146 | 145 | if (minDeg === 90) minHand.style.transition = 'all 0s'; |
147 | | - else minHand.style.transition = 'all 0.1s'; |
| 146 | + else minHand.style.transition = 'all 0.1s cubic-bezier(0.9, 0.54, 0.26, 1.68)'; |
148 | 147 |
|
149 | 148 | // 时针间距过大不做处理 |
150 | 149 | // if (hourDeg === 116.5) hourHand.style.transition = 'all 0s'; |
|
0 commit comments