好的css动画，能给用户体验带来很大的提升，同时也能增加app的趣味性，给人眼前一亮的感觉。那如何实现这种全屏的弹窗入场和退场的动画
实现效果
代码实现
- UI样式美化
#musicDetails{width: 100%;height: 100%;top:0;left:0;position: absolute;background: url(./img/detailsBg.jpg) no-repeat;background-size: cover;z-index: 99;background-position: bottom;}
- html结构
<div id="musicDetails"><div class="details_title"><div class="details_name"><span id="details_songName">异形人</span><span id="details_singerName">李建</span></div><span id="details_tips" class="details_tips"></span></div><div class="details_lyric"></div><div class="details_audio"><div class="details_audioAll"><div class="details_audioPro"><div class="details_audioProUp"></div><div class="details_audioProBar"></div></div><div class="details_nowTime">00:00</div><div class="details_allTime">04:32</div><div class="details_play"></div><div class="details_pre"></div><div class="details_next"></div></div></div><ul class="details_btn"><li class="active"></li><li></li></ul></div>
-
核心业务逻辑实现
也就是点击按钮，使用
js实现css3的translate动画
function bind(){$details_tips.on(touchstart,function(){slideDown()})
}function slideUp(){$musicDetails.css("transition",".5s")$musicDetails.css("transform",`translate3d(0,0px,0)`)// 修改详情页面的歌名和歌手名details_songName.text(list_audioTitle.text())details_singerName.text(list_audioName.text())}
function slideDown(){$musicDetails.css("transform",`translate3d(0,${viewHeight}px,0)`)
}
这样我们就实现了详情页面的显示和隐藏的弹出动画
