Skip to content

公瑾 / lucky-draw

Go to a project
Toggle navigation
Toggle navigation pinning
b36225d0 by zhangyongfeng
Options

增加抽奖结束时的结果动画，使中奖动画更自然

1 parent 9ea65295
Inline Side-by-side
Showing 2 changed files with 52 additions and 17 deletions
...@@ -19,18 +19,20 @@ ...@@ -19,18 +19,20 @@
19 </li> 19 </li>
20 </ul> 20 </ul>
21 </div> 21 </div>
22 <div id="resbox" v-show="showRes"> 22 <transition name="bounce">
23 <p @click="showRes = false">{{ categoryName }}抽奖结果：</p> 23 <div id="resbox" v-show="showRes">
24 <span 24 <p @click="showRes = false">{{ categoryName }}抽奖结果：</p>
25 v-for="item in resArr" 25 <span
26 :key="item" 26 v-for="item in resArr"
27 class="itemres" 27 :key="item"
28 :style="resCardStyle" 28 class="itemres"
29 @click="showRes = false" 29 :style="resCardStyle"
30 > 30 @click="showRes = false"
31 {{ item }} 31 >
32 </span> 32 {{ item }}
33 </div> 33 </span>
34 </div>
35 </transition>
34 36
35 <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" /> 37 <LotteryConfig :visible.sync="showConfig" @resetconfig="reloadTagCanvas" />
36 <Tool @toggle="toggle" @resetConfig="reloadTagCanvas" :running="running" /> 38 <Tool @toggle="toggle" @resetConfig="reloadTagCanvas" :running="running" />
...@@ -61,7 +63,7 @@ export default { ...@@ -61,7 +63,7 @@ export default {
61 63
62 computed: { 64 computed: {
63 resCardStyle() { 65 resCardStyle() {
64 const style = {}; 66 const style = { fontSize: '30px' };
65 const { number } = this.config; 67 const { number } = this.config;
66 if (number < 100) { 68 if (number < 100) {
67 style.fontSize = '100px'; 69 style.fontSize = '100px';
...@@ -182,9 +184,7 @@ export default { ...@@ -182,9 +184,7 @@ export default {
182 if (this.running) { 184 if (this.running) {
183 window.TagCanvas.SetSpeed('rootcanvas', speed()); 185 window.TagCanvas.SetSpeed('rootcanvas', speed());
184 this.reloadTagCanvas(); 186 this.reloadTagCanvas();
185 setTimeout(() => { 187 this.showRes = true;
186 this.showRes = true;
187 }, 300);
188 } else { 188 } else {
189 this.showRes = false; 189 this.showRes = false;
190 const { number } = config; 190 const { number } = config;
...@@ -257,6 +257,12 @@ export default { ...@@ -257,6 +257,12 @@ export default {
257 color: #ccc; 257 color: #ccc;
258 font-size: 12px; 258 font-size: 12px;
259 } 259 }
260 .bounce-enter-active {
261 animation: bounce-in 1.5s;
262 }
263 .bounce-leave-active {
264 animation: bounce-in 0.2s reverse;
265 }
260 } 266 }
261 #main { 267 #main {
262 height: 100%; 268 height: 100%;
...@@ -282,7 +288,6 @@ export default { ...@@ -282,7 +288,6 @@ export default {
282 border-radius: 4px; 288 border-radius: 4px;
283 border: 1px solid #ccc; 289 border: 1px solid #ccc;
284 line-height: 160px; 290 line-height: 160px;
285 font-size: 80px;
286 font-weight: bold; 291 font-weight: bold;
287 margin-right: 20px; 292 margin-right: 20px;
288 margin-top: 20px; 293 margin-top: 20px;
......
...@@ -16,3 +16,33 @@ ...@@ -16,3 +16,33 @@
16 left: -400%; 16 left: -400%;
17 } 17 }
18 } 18 }
19
20 @-webkit-keyframes bounce-in {
21 0% {
22 -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
23 transform: translateX(-50%) translateY(-50%) scale(0);
24 }
25 50% {
26 -webkit-transform: translateX(-50%) translateY(-50%) scale(1.5);
27 transform: translateX(-50%) translateY(-50%) scale(1.5);
28 }
29 100% {
30 -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
31 transform: translateX(-50%) translateY(-50%) scale(1);
32 }
33 }
34
35 @keyframes bounce-in {
36 0% {
37 -webkit-transform: translateX(-50%) translateY(-50%) scale(0);
38 transform: translateX(-50%) translateY(-50%) scale(0);
39 }
40 50% {
41 -webkit-transform: translateX(-50%) translateY(-50%) scale(1.5);
42 transform: translateX(-50%) translateY(-50%) scale(1.5);
43 }
44 100% {
45 -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
46 transform: translateX(-50%) translateY(-50%) scale(1);
47 }
48 }
......