PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
今天已经是大年初四啦，大家年货吃得怎么样了呢，过年瓜子是一定要嗑的，我已经嗑瓜子磕到起泡了... 之前很火的嗑瓜子神器，就是把瓜子丢进去，就会自动吐出瓜子仁
先创建一个vue实例，规定在#app的范围
画一个模拟的嗑瓜子机，不知道怎么画立体的呜呜，下面是画的代码片段
<div class="box">
<div class="box1">
<div class="imgBox">
<img src="./static/img/huhu.png" alt="">
</div>
<div class="box2"><div class="handle"></div></div>
<div class="box3"> </div>
<div class="box4"><div class="hole2"></div></div>
</div>
</div>
画的很简单，主要都是用border-radius美化了一下边缘，然后有的地方用到了z-index的原因是不想要那部分被待会要画的瓜子覆盖，伪造一种瓜子放进机器的感觉。小老虎的图的使用img贴上去的，最上面那个白色的框框就是机器口，最下面的那个就是出口
.box{
position: absolute;
top: 200px;
}
.box1{
width: 200px;
height: 150px;
background-color: rgb(245, 228, 228);
border-radius: 15px;
position: relative;
}
.box2{
width: 40px;
height: 140px;
background-color: rgb(250, 199, 199);
border-radius: 15px;
position: absolute;
top: 5px;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.handle{
width: 20px;
height: 100px;
background-color: #fff;
border-radius: 10px;
}
.box3{
position: absolute;
top: 5px;
left: 15px;
width: 120px;
height: 20px;
background-color: #fff;
border-radius: 15px;
z-index: 2000;
}
.box4{
position: absolute;
bottom: 10px;
width: 70px;
height: 50px;
margin-left: 40px;
background-color: rgb(250, 199, 199);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.hole2{
width: 62px;
height: 42px;
background-color: #fff;
border-radius: 15px;
}
.imgBox{
position: absolute;
top: 10px;
width: 70%;
height: 82px;
background-color: rgb(245, 228, 228);
z-index: 2000;
}
img{
width: 60px;
height: 60px;
margin-top: 20px;
margin-left: 40px;
}
然后画一个瓜子，用flag控制瓜子仁的显示，当点击按钮时改变flag的状态为true，然后使用transition进行动画，完成瓜子的的动画后使用定时器触发瓜子仁的的动画
<input type="button" value="嗑瓜子" @click="flag=!flag"> <input type="button" value="嗑瓜子" @click="flag=!flag">
瓜子使用flag触发动画，瓜子仁使用flag2触发
<transition name="" mode=""
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="egusi1" v-show="flag" >
<div class="egusi2">
<div class="egusi3"></div>
</div>
</div>
</transition>
<transition name="" mode=""
@before-enter="beforeEnter2"
@enter="enter2"
@after-enter="afterEnter2">
<!-- -->
<div class="shelled_melon_seed" v-show="flag2"></div>
</transition>
let vm = new Vue({
el: '#app',
data: {
flag: false,
flag2: false
},
methods: {
// 动画钩子函数的第一个参数： el 表示要执行动画的那个DOM元素,是一个原生的JS DOM对象
beforeEnter(el){
// 此时动画尚未开始，可以设置小球开始动画之前的起始位置
el.style.transform = "translate(120px, 0)"
},
enter(el, done){
el.offsetWidth;
//没有实际的作用，但是如果不写出不来动画效果，可以认为el.offsetWidth;会强制动画刷新
// 动画开始之后的样式，可以设置小球完成动画之后的结束状态
el.style.transform = "translate(20px, 200px)";
el.style.transition = "all 2s ease";
// 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
done();
},
afterEnter(el){
// 动画完成之后调用afterEnter，关闭瓜子的动画，改变成false，方便下一次按钮的触发，并使用定时器触发瓜子仁的动画
this.flag = false;
setTimeout(this.d, 2000);
},
d(){
this.flag2 = true;
},
// 瓜子仁的动画，和瓜子相似
beforeEnter2(el){
el.style.transform = "translate(50px, 260px)"
},
enter2(el, done){
el.offsetWidth;
el.style.transform = "translate(50px, 600px)";
el.style.transition = "all 2s ease";
done();
},
afterEnter2(el){
this.flag2 = false;
}
}
})
瓜子和瓜子仁的css，主要是改变div的形状，伪造一个瓜子的形状
#app{
margin-left: 200px;
}
.egusi1{
width: 60px;
height: 60px;
background-color:#f5cdb3;
border-radius: 61% 39% 100% 0% / 100% 35% 66% 2% ;
position: relative;
overflow: hidden;
z-index: 1000;
}
.egusi2{
position:absolute;
top: 0px;
left: 0px;
width: 60px;
height: 60px;
background-color: #302C29;
border-radius: 85% 14% 100% 0% / 100% 14% 84% 2% ;
transform:rotate(0deg);
}
.egusi3{
position:absolute;
top: -16px;
left: 28px;
width: 5px;
height: 88px;
background-color: #f3d4bf;
border-radius: 20px/200px;
transform:rotate(43deg);
}
.shelled_melon_seed{
width: 40px;
height: 40px;
background-color:#f8e8dc;
border-radius: 61% 39% 100% 0% / 100% 35% 66% 2% ;
z-index: 2000;
}
那最后祝大家春节快乐! 吃好喝好😁
