【原生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)`)
}

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

相关推荐
清风ai明月1 分钟前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿2 分钟前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
咪库咪库咪4 分钟前
css进阶:flex
前端
xcsweb4 分钟前
用AI理解前端文件类型
前端
剑亦未配妥5 分钟前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
Enddme5 分钟前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript
逆袭的小黄鸭7 分钟前
深入剖析 JavaScript 执行上下文:代码运行的幕后机制
前端·javascript·面试
小old弟7 分钟前
闭包:从入门到“顿悟”的奇幻之旅
前端
晴殇i8 分钟前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
码是生活9 分钟前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos