使用Javascript隐藏兄弟框动画
可以通过以下步骤实现：
- 首先，获取要隐藏的兄弟框的DOM元素。可以使用document.querySelector()或document.getElementById()等方法获取到对应的元素。
- 接下来，使用CSS样式来定义动画效果。可以使用@keyframes规则来定义动画的关键帧，设置不同的样式属性值来实现隐藏动画效果。例如，可以设置透明度从1到0，或者高度从100%到0等。
- 在Javascript中，使用classList属性来添加或移除CSS类。可以通过添加一个包含隐藏动画的CSS类来触发动画效果。例如，可以使用classList.add()方法添加一个名为"hide-animation"的CSS类。
- 最后，使用setTimeout()函数来延迟一段时间后，再使用classList.remove()方法移除添加的CSS类，以恢复原始状态。可以根据动画的持续时间来设置延迟的时间。
下面是一个示例代码：
// 获取要隐藏的兄弟框的DOM元素
var siblingBox = document.querySelector('.sibling-box');
// 定义动画效果的CSS样式
var animationStyle = `
@keyframes hideAnimation {
from { opacity: 1; }
to { opacity: 0; }
}
`;
// 创建一个style标签，并将动画样式添加到其中
var styleTag = document.createElement('style');
styleTag.innerHTML = animationStyle;
document.head.appendChild(styleTag);
// 添加CSS类来触发动画效果
siblingBox.classList.add('hide-animation');
// 延迟一段时间后，移除CSS类恢复原始状态
setTimeout(function() {
siblingBox.classList.remove('hide-animation');
}, 1000); // 延迟1秒后移除CSS类这样，当执行以上代码时，兄弟框会以动画的方式从可见状态渐渐隐藏。你可以根据实际需求修改动画效果的CSS样式和延迟的时间。
请注意，以上代码只是一个示例，实际应用中可能需要根据具体情况进行适当的修改和调整。
相关·内容
2回答
用动画改变源图像
javascript、html、css、css-transitions、settimeout
在JS和CSS中更改循环淡入/淡出图像源以及使用SetTimeout()回调时，我遇到了问题。问题是，序列的工作方式很奇怪:有时图像在转换开始之前就会发生变化，有时会正常工作，有时会以相反的方式工作。
这是我的JS：
const animationTime = 5000;
const transitionTime = 500;
function nextImage() {
let img = document.getElementById('img1');
img.classList.remove('hidden');
setTimeout(fu
浏览 0提问于2018-11-20得票数 1
1回答
用JS操纵元素的css动画位置
javascript、css、animation、css-transitions
我正在尝试更改元素的位置，该元素在x轴上使用css动画移动。目标是在单击鼠标的情况下水平移动元素。当然，动画之后应该继续定期运行。
重要提示:只使用原生js。
有什么提示吗？
基本示例
<style>
.dummyAnimation{width:100%;position:relative;height:100px;}
.bump{width:100px;height:100px;background:blue;animation:dummySequence 30s linear infinite;position:absolute;}
.bum
浏览 6提问于2021-09-16得票数 0
2回答
CSS动画-方向不像我所期望的那样工作
css、css-animations、css-animation-direction
N.B.具有(更复杂的)设置，实际上我无法使用CSS Transitions。在下面的示例中，我认识到CSS Transitions将是一个非常好的解决方案。
我有个小麻烦
animation-direction: reverse
我以前从未使用过，但似乎并没有按照我所期望的方式运行。
对于我的问题，最简单的解决方案是编写两个CSS @keyframes动画，并使用其中一个。
但为了节省和优雅，我想使用，一个单一的动画，并将它前后播放。
下面的例子显示了我想要达到的效果。
当页面加载时，按任意一个按钮都会触发预期的动画。
然而，在按下一个按钮后，动画不再运行，只显示正反向动画的结束帧。
我
浏览 3提问于2021-03-22得票数 0
回答已采纳
4回答
在CSS3动画之后隐藏div
html、css
想知道如何隐藏一组css3动画后的div。下面是我的代码：
#box {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 150px;
background-color: red;
}
#box:hover {
-webkit-animation: scaleme 1s;
}
@-webkit-keyframes scaleme {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
浏览 0提问于2012-04-03得票数 21
回答已采纳
1回答
CSS动画不会在第二次jQuery调用后再次发生。
javascript、html、jquery、css
我有一个CSS动画效果，使文字闪烁3次。每次得到不同的响应时，它都要重置其状态(例如，下面的按钮充当响应)
如何通过jQuery重新设置CSS动画的状态？
(function($) {
$.fn.replaceClass = function(pFromClass, pToClass) {
return this.removeClass(pFromClass).addClass(pToClass);
};
}(jQuery));
$("#true").click(function() {
$('#animate').replaceCla
浏览 1提问于2022-07-28得票数 1
回答已采纳
3回答
<a href>上的CSS动画/过渡
html、css
我在找人帮忙。我希望当单击其中一个导航按钮时，可以将一些CSS动画应用于名为content的div id。
单击时，我希望触发动画，使其从页面中消失，并加载新页面。
导航栏
<ul id="nav">
<li><a href="index.html">HOME</a></li>
<li><a href="about-us.html">ABOUT US</a></li>
<li><a href=
浏览 5提问于2013-10-07得票数 1
4回答
加载和悬停时的不同CSS动画
css、animation
我有一个当页面加载时发生的动画。我想在悬停时设置相同元素的动画。然而，然后我再次鼠标离开，原来的过渡再次播放。我怎样才能把鼠标的不透明度保持在100%，这样中间就不会闪光了？
HTML
<div class="bubble animated"></div>
CSS
.bubble{
background-color:#000;
width:50px;
height:50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radiu
浏览 1提问于2013-11-06得票数 1
1回答
如何将比例淡入淡出设置为反向淡出？
javascript、html、css
欢迎光临。我已经有了动画中的淡入淡出。当我的对话框或对话框打开时，动画效果很好。但是，问题是在单击X按钮关闭动画时不会发生这种情况。我希望现在发生的事情在淡入，发生在淡出也。简而言之，当我的对话框弹出时，动画弹出得很好，但我想退出对话框，这样动画也会缩小。代码：
html
<div class="modal-dialog">
any content
// button which close animation
<button type="button" class="close" (cl
浏览 3提问于2020-04-07得票数 0
1回答
当单击两个不同的按钮时，如何在同一文本上应用不同的动画
html、css、css-animations
我有一个按钮，单击该按钮将显示一个<p> text <p/>元素，并给它一个动画(从上到下)，但现在我创建了另一个按钮，单击该按钮将删除<p>元素中的文本，以便在发生这种情况时添加一个动画，但当我在删除时将CSS编码为动画时，它似乎覆盖了前面的动画。
在CSS中是否有if there语句，或者我可以在JavaScript中这样做？这是香草JavaScript和CSS。
<button class="button" onclick="Click()">click me</button>
<p id=
浏览 8提问于2022-02-09得票数 2
回答已采纳
6回答
使用JavaScript通过onclick将Css动画应用于类
javascript、html、css
我有一个这个脚本：
function ani(){
document.getElementById('para').className ='exeInputapparition';
}
在ID为para的元素上应用css动画。它是有效的，但我想知道它是否有可能应用于所有拥有class para而不是ID的元素，因为我有不止一个元素需要应用我的CSS动画。提前感谢您的帮助:)
Css：
@keyframes inputapparition {
0%
{
opacity: 0;
}
100%
浏览 0提问于2016-01-16得票数 0
2回答
焦点复位的CSS动画
html、css、animation
我正在为我的按钮制作材料风格的动画。试图避免任何JS，因此出现了以下样式：
//动画
.btn {
position: relative;
&:after {
content: '';
position: absolute;
top: 0; bottom: 0; left: -10%; right: -10%;
border-top-left-radius: 2% 50%;
border-bottom-left-radius: 2% 50%;
border
浏览 5提问于2017-02-08得票数 6
回答已采纳
2回答
动画持续时间在Safari中运行不正常
javascript、css、animation、safari、css-animations
我们正在做一个简单的项目，其中我们使用CSS动画。我们正在尝试使用JavaScript更改动画持续时间。更改动画持续时间在除safari和iOS之外的所有浏览器中都有效。
我们使用这段代码来改变动画的持续时间。
document.getElementById("circle").style.animationDuration = data.pulse+"ms"
document.getElementById("circle").style.webkitAnimationDuration = data.pulse+"ms"
这是cs
浏览 1提问于2015-06-25得票数 0
2回答
如何防止css关键帧动画页面加载？
javascript、css、css-animations、keyframe
我有一些CSS动画，关键帧在我的页面上的fadein/out元素。问题是，当我加载页面时，会显示淡出的动画。
HTML：
<button class="toggle-good">Toggle display</button>
<p class="box">I move nicely!</p>
CSS：
.box {
height: 0;
opacity: 0;
animation: FadeOut 1s ease-in-out;
}
.box.active {
height: initial;
浏览 3提问于2016-08-19得票数 0
回答已采纳
8回答
jQuery + Animate.css动画只工作一次，动画不重置
javascript、jquery、css、animation
每次按下按钮，我都会尝试复制一个特定的动画。
具体来说，我使用jQuery和animate.css库来实现这个效果:在单击按钮时，在我想要动画的元素中添加一个类(确切地说是两个类：fadeInDown animated)。
动画工作正常，但只有一次。为什么会这样呢？
小提琴：
我想要动画重置每次我点击按钮，即使它是在完成的一半，从以前的点击。每当我单击按钮时，它也应该工作，而不仅仅是一次。
联署材料：
$("#button").click(function () {
$("#button").removeClass();
$("#butt
浏览 8提问于2015-02-18得票数 11
回答已采纳
2回答
如何使CSS动画只在一个元素上生效，而不管哪个元素调用动画
html、css、css-animations
我对CSS动画很陌生，这是我的代码。
@keyframes fadeOut{
0% {opacity: 1;}
100% {opacity: 0;}
}
我希望上面的代码只在#menu上生效，而不管它在哪里调用，对于EG:它是按一下按钮调用的，但只会影响#menu元素。有点像而且不会对按钮做任何事情
button:focus{animation-name: fadeOut;
animation-duration: 4s;}
@keyframes fadeOut{
#menu{0% {opacity: 1;}}
#menu{100% {opacity: 0;}}
}
但是上面的
浏览 9提问于2021-03-08得票数 0
回答已采纳
3回答
通过js添加类不会触发css动画
html、css、web、css-animations、gumby-framework
我有一个修改过的animate.css版本(添加了一些延迟，新的时间和新的位置)，当类是默认设置的时候，它真的很好用(html文档)。但是当我通过js动态添加动画类时，动画并没有被执行！
更令人恼火的是，我曾经让它工作过，但我不能让它再次工作(使用gumby框架和inview js在元素显示时添加一个类(添加.animated))。左边的框中的类已经在html中，右边的框中有js添加的.animate类。
示例：
你知道为什么右边的长方体没有动画吗？
使用Gumby inview扩展：
编辑:添加html：
<div class="six columns text-center
浏览 1提问于2014-02-28得票数 11
2回答
在JavaScript中用::after选择器停止CSS动画
javascript、css
我有一个JavaScript函数，它逐个字母地输入一个消息。但是，在当前要输入的字符所在的地方，我有一个闪烁的css动画。我需要的是停止这个动画，让它消失。
我正在使用css与#id::after放在动画后的文本问题。动画工作正常，我需要一种通过content: '█';将content: '';设置为JavaScript的方法。
(function type_p(){
let msg = 'This is a message to type out! Spooky!';
let element = document.getE
浏览 3提问于2021-12-21得票数 2
回答已采纳
2回答
简单表象动画
javascript、html、css
只要制作一个非常简单的动画：
p {
animation: appear 1s linear 1;
font-family:monospace;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<p>Thank you for any helps!</p>
这是可行的，但我只是在想，是否有可能使第一个字母首先出现，第一个字母出现之后，然后第二个字母，最后一个字母(现在p的全部内容将同时出现)
CSS是否有任何选择器来选择元素中的每个字符，并且
浏览 5提问于2022-02-28得票数 1
回答已采纳
2回答
使用CSS动画和jQuery删除div消息
javascript、jquery、html、css
我像这样使用PHP打印成功消息：
<div class='alert alert-success'>Success!!</div>
我有一个CSS3动画：
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iter
浏览 7提问于2014-12-31得票数 0
回答已采纳
1回答
使用CSS转换显示/隐藏
css、css-transitions
我试图使用以下两个css类来显示/隐藏具有转换效果的元素-
.hidden{
opacity: 0;
height: 0;
overflow: hidden;
visibility: hidden;
transition: all 2s;
}
.shown{
opacity: 1;
visibility: visible;
height: auto;
transition: all 2s;
}
//JS co
浏览 8提问于2022-07-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
