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

好的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实现css3translate动画

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

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

相关推荐
艾小逗42 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器