为了账号安全,请及时绑定邮箱和手机立即绑定

动态创建的 HTML5 元素上的转换.. 如何在 Javascript 中定义?

动态创建的 HTML5 元素上的转换.. 如何在 Javascript 中定义?

达令说 2021-06-14 16:57:05
我正在<div>通过onclick按钮的方法创建一个新的。这个想法是一张卡片出现在屏幕上,然后可以通过许多动作来处理。按钮的 HTML5 代码如下。<input type="submit" class="transition_submit" value="Transition" onclick="card_AppearsHome()"> 为了动态创建卡片,我添加了一个 JavaScript 文件。我使用一个变量transition_counter来跟踪卡片的状态,类似于“显示/隐藏”。function card_AppearsHome() {    if (transition_counter == 1){    document.getElementById("white_background_top").removeChild(home_card);    transition_counter = 0;}else {    //card/ div is created and appears, need to select a tranform: transition method     //probeer hier JQuery te gebruiken, dit is veel minder code     home_card = document.createElement('div');    home_card.id = "home_card";    home_card.style.position = "relative";    home_card.style.width = "20vw";    home_card.style.height = "20vh";    home_card.style.left = "54vw";    home_card.style.top = "25vh";    home_card.style.background = "#000";    document.getElementById("white_background_top").appendChild(home_card);    transition_counter = 1;}}这通过单击按钮创建和删除卡。我现在要做的是定义卡片的传入和传出过渡效果。我在寻找有关如何在新创建元素的 JavaScript 文件中定义这些过渡效果的文档时遇到了一些困难。我应该怎么办?如果你能指出我正确的方向,效果并不重要,我只需要知道从这里开始如何访问过渡方法..
查看完整描述

2 回答

?
慕尼黑8549860

TA贡献1818条经验 获得超11个赞

通过传入和传出过渡效果,您的意思是像一个动画,它滑入然后滑出?

如果是这样,您可能可以主要使用 CSS。可能的文档:CSS & 在JavaScript 中使用它(查看左侧栏中,有更多页面。我只是链接了两个主要页面)


您还可以只查看 CSS 动画,然后在创建和关闭动画时通过 JavaScript 调用动画。CSS 动画文档在这里

要调用动画,您应该能够向对象添加一个类,然后它会执行动画,然后在完成动画后删除该类。

抱歉没有代码示例,我目前不在家。如果您需要一些,我可以尝试为您创建一个 JSFiddle 或其他东西。


查看完整回答
反对 回复 2021-06-24
  • 2 回答
  • 0 关注
  • 130 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信