荆州大气网站建设价格_陕西省人民政府门户网站官网_自动的网站设计制作_最近一周的重大热点新闻

好的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)`)
}

这样我们就实现了详情页面的显示和隐藏的弹出动画