HTML/JS-如何用动画切换显示/隐藏?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (615)

我的问题是,我需要做一个切换显示/隐藏窗口,但不是display: none/block我需要它bottom: 0px/300px所以我可以将CSS转换应用到它上。

你们能找到任何解决方案,让我以我想要的方式实现切换功能吗?

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
} 
// So this is what I DO NOT want.
// I need it to use bottom:*value*
// instead of display:block/none

提问于
用户回答回答于

只需将函数中的样式属性用法更改为Element.style.displayElement.style.bottom

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 

html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}
<div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;">
Div
</div>
<button style="position: fixed;" onClick="myFunction()">Toggle Bottom Property of #myDiv</button>
<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
</script>

若要添加transitionbottom属性,只需添加transition: bottom 1s因此,当底部属性发生变化时,它将开始一个持续1秒的转换。

html, body{
 overflow-y: auto;
 height: 500px;
 position: relative;
}

.animateBottom{
    transition: bottom 1s;
}
<div id="myDIV" style="position: absolute; bottom: 0px; width: 50%; border: 1px solid black;" class="animateBottom">
Div
</div>
<button style="position: fixed;" onClick="myFunction()">Toggle Bottom Property of #myDiv</button>
<script>
function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.bottom === "0px") {
        x.style.bottom = "300px";
    } else {
        x.style.bottom = "0px";
    }
} 
</script>

热门问答

腾讯会议共享屏幕,其他人收到的是黑屏?

你好,共享屏幕黑屏问题,可以先尝试把腾讯会议版更新到最新版本测试验证,如更新到最新版未能解决您的问题,可以填写以下信息: 【*会议号】 【*入会昵称】 【*注册手机号】 【*问题出现的腾讯会议版本】 【*出现平台以及版本:Android/iOS/win/mac/小程序】 【*出现...... 展开详请

实时音视频和小程序集成,设置合法域名 文档中少了一个域名?是否还有其他域名需要设置?

shixin

腾讯 · 高级产品经理 (已认证)

推荐

在开发工具上开启不校验合法域名即可,不影响真机运行,不需要配置,

cos文件最大可以存储多大的问题件?

腾讯云技术服务团队

腾讯云 · 技术服务团队 (已认证)

腾讯云技术服务团队
推荐
COS简单上传最大可以上传5GB的文件,分片上传最大可以上传48.82TB (50,000GB )的文件。可参见COS产品文档https://cloud.tencent.com/document/product/436/14518 对于您提到的问题。js调用cos接口上传大于8M...... 展开详请

Dr.Elephant支持hadoop3吗?还有编译一直有包找不到怎么解决?

目前TBDS的hadoop版本是2.7.2,建议配置文件中使用该版本号进行匹配

如何用命令修改腾讯云解析目标ip?

氧化先生道可道 非常道 名可名 非常名
推荐
可以,参考: https://cns.api.qcloud.com/v2/index.php? &<公共请求参数> &Action=RecordCreate &domain=qcloud.com &subDomain=www &recordType=A &recordLine=默...... 展开详请

腾讯云IM使用不同视频创建视频消息的时候生成的缩略图都是一样,而且是透明的图片,为什么?

最爱开车啦互联网的敏感者
推荐
文档上已经有相关描述https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/SDK.html?_ga=1.118341771.384230994.1576337691#createVideoMessage image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券