【原生js案例】移动端如何实现页面的入场和出场动画

风清云淡_A2024-12-22 9:44

好的css动画，能给用户体验带来很大的提升，同时也能增加app的趣味性，给人眼前一亮的感觉。那如何实现这种全屏的弹窗入场和退场的动画

实现效果

代码实现

UI样式美化

css 复制代码

#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结构

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动画

js 复制代码

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

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