开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 移动显示离开隐藏动画

在移动端使用 JavaScript 实现元素的离开（hide）动画，可以通过 CSS 动画结合 JavaScript 来完成。以下是基础概念、优势、类型、应用场景以及实现方法的详细说明：

基础概念

CSS 动画：通过 CSS 的 @keyframes 定义动画序列，并应用到目标元素上。

JavaScript 控制：使用 JavaScript 来触发 CSS 动画，例如通过添加或移除类名来启动动画。

优势

性能优化：CSS 动画由浏览器优化渲染，性能优于 JavaScript 动画。
简洁易用：分离样式与逻辑，代码更清晰。
可维护性强：动画效果集中管理，便于修改和复用。

类型

淡出（Fade Out）：元素逐渐透明直至消失。
滑动（Slide Out）：元素向某个方向滑动离开视图。
缩放（Scale Out）：元素逐渐缩小直至消失。

应用场景

导航菜单的展开与收起。
弹窗的显示与隐藏。
列表项的动态加载与移除。

实现方法

以下以淡出动画为例，展示如何使用 CSS 和 JavaScript 实现元素的离开隐藏动画。

CSS 部分

/* 定义淡出动画 */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 应用动画的类 */
.hide-animation {
    animation: fadeOut 0.5s forwards;
}

HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>离开隐藏动画示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="animatedElement" style="width:100px; height:100px; background-color:blue;">
        点击隐藏
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript 部分

document.getElementById('animatedElement').addEventListener('click', function() {
    // 添加动画类
    this.classList.add('hide-animation');

    // 动画结束后隐藏元素
    this.addEventListener('animationend', function handler() {
        this.style.display = 'none';
        // 移除事件监听器，防止重复触发
        this.removeEventListener('animationend', handler);
    }, { once: true });
});

解释

CSS 动画：fadeOut 动画使元素从完全不透明（opacity: 1）过渡到完全透明（opacity: 0），持续时间为 0.5 秒。
JavaScript 控制：
- 当用户点击元素时，JavaScript 为该元素添加 hide-animation 类，触发 CSS 动画。
- 使用 animationend 事件监听动画结束，动画结束后将元素的 display 属性设置为 none，从而彻底隐藏元素。
- 使用 { once: true } 确保事件监听器只执行一次，避免重复绑定。

常见问题及解决方法

动画不触发：
- 确保 CSS 动画类正确添加到元素上。
- 检查 CSS 选择器和类名是否匹配。

动画结束后元素未隐藏：
- 确保在 animationend 事件中正确设置 display: none。
- 确保事件监听器绑定成功，并且没有其他代码干扰。
动画性能问题：
- 使用 CSS 动画而非 JavaScript 动画，以提高性能。
- 避免在动画过程中频繁操作 DOM 或样式。

扩展

如果需要更复杂的动画效果，可以结合 CSS3 的其他动画属性，如 transform（平移、旋转、缩放）等。此外，可以使用动画库如 Animate.css 或 GSAP 来简化动画的实现。

希望以上内容能帮助你在移动端实现元素的离开隐藏动画。如有进一步的问题，欢迎继续提问！

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS 控制隐藏显示

比较简单的实现.style.display就是控制层隐藏或显示的属性....style="display: none" onMouseout="hidden();"> show it div的visibility可以控制div的显示和隐藏...，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";...//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示通过设置display属性可以使div隐藏后释放占用的页面空间...("typediv1").style.display="";//显示如果用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了

20.7K3 0

【jQuery动画】显示与隐藏效果

‍ 哈喽大家好，本次是jQuery案例练习系列第三期 ⭐本期是jQuery动画——显示与隐藏效果系列专栏：前端案例练习笔者还是前端的菜鸟，还请大家多多指教呀~ 欢迎大佬指正，一起学习，...---- 文章目录前言控制显示与隐藏的方法实现效果 HTML、CSS部分 jQuery部分总结 ---- 前言在网页开发中，适当地使用动画可以使页面更加美观，进而增强用户体验。...本期我们一起来了解一下显示与隐藏效果吧~ ---- 控制显示与隐藏的方法控制显示与隐藏的方法主要为show、hide、toggle 方法说明 show([speed,[easing],[fn]])...显示被隐藏的匹配元素 hide([speed,[easing],[fn]]) 隐藏已显示的匹配元素 toggle([speed],[easing],[fn]) 元素显示与隐藏切换 speed：动画的速度...fn：在动画完成时执行的函数。实现效果当点击“显示”，则div中的内容会显示，并弹出提示框，点击“隐藏”则隐藏内容，弹出提示框，点击“切换”，则会在二者之间切换。

6.7K1 0

UIPickerView显示和隐藏的动画

completion:^(BOOL finished) { [view setHidden:hidden]; }]; } UIPickerView显示和隐藏的动画

1.9K3 0

SwiftUI：视图的显示和隐藏动画

SwiftUI最强大的功能之一是能够自定义视图的显示和隐藏方式。以前，您已经了解了如何使用常规if条件有条件地包含视图，这意味着当条件更改时，我们可以从视图层次结构中插入或移除视图。...200) } 最后，我们可以在按钮的点击事件中将isShowingRed在“true”和“false”之间切换： self.isShowingRed.toggle() 如果你运行程序，你会看到按下按钮显示或者隐藏红色方块...没有动画；它只是突然出现和消失。...我们可以获得SwiftUI的默认视图转换，如下所示： withAnimation { self.isShowingRed.toggle() } 有了这个小小的改变，应用程序现在淡入淡出红色矩形，同时向上移动按钮以腾出空间...一个有用的方法是不对称，它允许我们在显示视图时使用一个转换，在视图消失时使用另一个转换。

4.6K3 0

Rn页面滚动显示隐藏head动画

2332 0

移动端重构实战系列4——进入离开动画

本文作者：IMWeb 结一原文出处：IMWeb社区未经同意，禁止转载 ”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，...“ ——imweb 结一进入离开动画在sandal的_animation.scss中我们定义了fade-in/out, shrink-in/out, up-in/out, down-in/out,...class已经有了，接下来就是用js把这两个class分别添加到进入和离开的时候。...es6 封装动画进入离开类 export class AnimateInOut { constructor({ele, className, inCallback, outCallback})...离开动画结束后回调函数 this.animationend = this.whichEndEvent(); // 使用animationend事件 this.endBind

81410 0

移动端重构实战系列4——进入离开动画

”本系列教程为实战教程，是本人移动端重构经验及思想的一次总结，也是对sandal及sheral UI的一次全方位剖析，首发在imweb和w3cplus两大站点及“前端Talk”微信公众号，其余所有标注或没有标注来源的均为转载...“ ——imweb 结一进入离开动画在sandal的_animation.scss中我们定义了fade-in/out, shrink-in/out, up-in/out, down-in/out,...class已经有了，接下来就是用js把这两个class分别添加到进入和离开的时候。...es6 封装动画进入离开类 export class AnimateInOut { constructor({ele, className, inCallback, outCallback})...离开动画结束后回调函数 this.animationend = this.whichEndEvent(); // 使用animationend事件 this.endBind

4931 0

移动端重构实战系列4——进入离开动画

进入离开动画在sandal的_animation.scss中我们定义了fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out,...class已经有了，接下来就是用js把这两个class分别添加到进入和离开的时候。...es6 封装动画进入离开类 export class AnimateInOut { constructor({ele, className, inCallback, outCallback})...离开动画结束后回调函数 this.animationend = this.whichEndEvent(); // 使用animationend事件 this.endBind...，而不是transition动画，因为transition动画从none到block的时候，直接添加动画的class是不会有动画效果的（除非使用回调函数或promise），而animation动画从none

6362 0

Android控件显示、隐藏时，增加动画效果

Android控件显示、隐藏时，增加动画效果首先还是看一下演示效果吧，不然凭什么相信我的帖子能解决你的问题呢？效果GIF如下 ?...alphaAnimation(); scaleAnimation(); translateAnimation(); } //位移动画...private void translateAnimation() { //向上位移显示动画从自身位置的最下端向上滑动了自身的高度 translateAniShow...ivAlphaLogo.startAnimation(alphaAniHide); //这个地方为什么要做动画的监听呢，因为隐藏和显示不一样...， //必须在动画结束之后再隐藏你的控件，这样才不会显得很突兀 alphaAniHide.setAnimationListener(new

5K3 0

zblog怎么在移动端显示隐藏侧栏模块

关于zblog主题模板手机移动端针对不同主题采用了不同的方案，有些是默认显示，有些不显示侧栏，总归没有一个完美的解决方案，所以今天就抽空水一篇文章，教大家怎么显示或者隐藏侧栏模板的内容。...首先我们把页面滑动到最下面，然后点击鼠标图标如图，然后在页面随意滑动，右侧就会显示对应的模块代码，比如图中的主题DIV模块，因为主题模板已经隐藏了侧栏，所以找不到具体的元素值，然后我们在主题模块下查看其他模块...，难看，建议改为560px，意思就是侧栏在999px-561px之间隐藏，在560px以下显示侧栏模块。...这是显示模块教程，想要隐藏，这也简单，首先确定移动端屏幕像素的尺寸，比如小于999px，那么隐藏的代码就是： @media screen and (max-width:999px){ .side.fr.../隐藏代码，然后把代码放在自定义css中，开启自定义css，完事。

1.1K2 0

jQuery框架实现元素显示及隐藏动画【附案例分析】

一、默认方式显示和隐藏在默认方法下显示元素的方法是 show([speed,[easing],[fn]]) 其中的参数含义为： speed：动画的速度。...，滑动方式和默认方式的不同之处其实就是显示和隐藏时的动画不一样罢了，下面我们就来介绍一下在滑动方式下进行元素的显示、隐藏、既显示又隐藏，滑动方式下显示 slideDown([speed],[easing.../js/jquery-3.3.1.min.js"> function hideFn() { // 隐藏div...这里就要用到js中的一个定时器setTimeout(方法,时间); 该方法的第一个参数是一个方法名，如显示或隐藏图片的方法，第二个参数是毫秒数，表示页面加载完成后多少秒执行该方法，那么根据思路，我们就可以在.../js/jquery-3.3.1.min.js"> // 图片延时显示和隐藏的步骤 // 1、在页面加载完成之后调用定时器setTimeout

6.4K2 0

今日作业 -- 用js控制DIV的显示隐藏

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主要有二个，一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，，二是判断条件的选择

17.1K6 0

显示隐藏切换同时变化文字jquery与js实现

;}); $(".fixed-table-container").css("padding-bottom","40px"); }) }) 第二种方法js...oDiv1.style.display = 'none'; oDiv2.style.display = 'block'; //这个地方显示... oDiv2.style.display = 'none'; oDiv1.style.display = 'block'; //这个地方显示

7.6K3 0

HTML5-JS操作页面滚动条（禁止、隐藏、显示、不显示）

不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY

10.9K3 0

vue项目中div切换显示与隐藏状态时的动画效果

// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行 // el:指的是当前调用这个方法的元素对象 // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before...执行完enter以后动画就会停止 beforeEnter: function (el) { el.style = "padding-left: 100px"; }, enter: function...el.offsetHeight; el.style = "padding-left: 0px"; //done(); }, //用不到可以不写 afterEnter: function (el) {}, //显示到隐藏

3.8K1 0

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解。...document.getElementById("d").style.display = ""; // 显示盒子的方法方式二 visibility属性可以控制div的显示和隐藏，但是隐藏后页面显示空白...通过attr设置属性 $(“#id”).attr(“style”,“display:none;”);//隐藏div $(“#id”).attr(“style”,“display:block;”);//显示...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

1020 0

【布局和界面】鼠标悬停动物显示和隐藏动画特效源码库

源码介绍：这是一款基于vuejs的鼠标悬停动物显示和隐藏动画特效。该特效使用vuejs来编写，在鼠标悬停到卡片上面时，会有一只指定的小狗从卡片下冒出来，非常炫酷和可爱。演示截图： ? ?.../style.css"> 引入JS： js'>js"> HTML部分：基于vuejs的鼠标悬停动物显示和隐藏动画特效 Mochi Shiba (vuejs, svg, css, cute)</

1.1K1 0

js显示隐藏 display visibility以及jquery里的show hide的区别

js显示隐藏 display visibility以及jquery里的show hide的区别文章包含个人理解，错误请您指出。...display和visibility都是css样式，而show hide则是jquery的方法 display 值描述 none 此元素不会被显示。...block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。...} js... 那究竟是谁的级别更高呢个人认为：谁隐藏谁级别就高，会优先执行隐藏属性，display隐藏就使用display回流，visibility隐藏就使用visibility不回流。

5.5K2 0

JS 评分五角星随鼠标移动显示

如图：当鼠标放到哪个星星上时，之前的星星显示黑色星，之后的显示黑色星 ...//遍历 var td = tds[i]; td.style.cursor ='pointer'; //设置鼠标显示形式...td.onmouseover =function() { //当鼠标移动时… … var rating = document.getElementById

3.4K14 0

28.Vue - 动画 - transition使用过渡类名实现动画

JavaScript 动画库，如 Velocity.js 单元素/组件的过渡 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用...-- 需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏 --> 离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。...*/ /* v-leave-to 【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画已经结束了 */ .v-enter, .v-leave-to {...-- 需求：点击按钮，让 h3 显示，再点击，让 h3 隐藏 --> <button v-on:click="show = !

1.7K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭