几秒后 Span 标签消失

Question

我有两个 div，其中包含 h 标签，其中我有一个 span 标签，其中包含字母

第一个Div

<div class="startname">
  <h6 class="alphabets" >
          <span class="letters">A</span>
          <span class="letters">B</span>
          <span class="letters">C</span>
          <span class="letters">D</span>
          <span class="letters">E</span>
          <span class="letters">F</span>
    </h6>
</div>

第二个Div

<div class="endname">
  <h6 class="alphabets" >
          <span class="letters">G</span>
          <span class="letters">H</span>
          <span class="letters">&nbsp;</span> 
          <span class="letters">I</span>
          <span class="letters">J</span>
    </h6>
</div>

First div starts from left top of the screen and scales to a particular location using keyframe

Second div starts from few pixels below the first div of the screen and scales to a particular location using keyframe

我希望 startname 中的字母 EF 和 lastname 中的 <whitespace>IJ 在 startname 和 lastname 对齐几秒后消失

这是 code 我发现哪些页面 div 在几秒后消失了

在 svelte 中尝试过，但似乎不起作用，下面是完整的代码。我怎样才能达到预期的效果？

<script>
window.onload = function() {
  window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
  document.getElementById('fadeout').style.opacity = '0';
}
</script>
<style>
  .startname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: startnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
    justify-content:flex-end;

}
#fadeout {
  opacity: 1;
  transition: 3s opacity;
}

.endname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: endnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
}

@keyframes startnamemymove {
  from {top: 0px;
  left:0px;
  transform: scale(.5);}
  to {top:150px;left: 200px;
  transform: scale(2.0);
  }
}
@keyframes endnamemymove {
  from {top: 100px;
  left:100px;
  transform: scale(.5);}
  to {top:0px;left: 500px;
  transform: scale(2.0);
  }
}
</style>
<h1>The @keyframes Rule</h1>

<div class="startname">
  <h6 class="alphabets" >
          <span class="letters">A</span>
          <span class="letters">B</span>
          <span class="letters">C</span>
          <span class="letters">D</span>
          <span class="letters" id="fadeout">E</span>
          <span class="letters" id="fadeout">F</span>
</div>
<div class="endname">
  <h6 class="alphabets" >
          <span class="letters">G</span>
          <span class="letters">H</span>
          <span class="letters" id="fadeout">&nbsp;</span>      
          <span class="letters" id="fadeout">I</span>
          <span class="letters" id="fadeout">J</span>
          
    </h6>
</div>

Answer 1

您不能在多个元素中使用相同的 ID。请使用 class.

Answer 2

方法 getElementById() 将 return 仅使用该 ID 的第一个元素。您可以使用 classes 和 getElementsByClassName()，其中 returns 是具有 class 名称的元素列表。这是 code.

Answer 3

错误是多次重复 id 淡出。

您需要用您想要的样式创建一个新的 class 并将其与字母放在一起：class="letters fadeout"。只是一个 space 之间。

在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors

Answer 4

这是可以帮助你的结果。

步骤需要记住

HTML 属性 ID 将用于单个元素
您可以使用 getElementsByClassName() 或 querySelectorAll() 在多个元素中应用不透明度。

window.onload = function() {
  window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
    document.querySelectorAll('span.fadeout').forEach(el => {
        el.style.display = "none";
    });
}

.startname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: startnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
    justify-content:flex-end;
    padding-right: 10px;
    

}
.fadeout {
  opacity: 1;
  transition: 3s opacity;
}

.endname {
  width: 150px;
  height: 150px;
  background: red;
  position: relative;
  animation: endnamemymove 5s 1 forwards;
  display: flex;
    align-items: center;
}

@keyframes startnamemymove {
  from {top: 0px;
  left:0px;
  transform: scale(.5);}
  to {top:150px;left: 200px;
  transform: scale(2.0);
  }
}
@keyframes endnamemymove {
  from {top: 100px;
  left:100px;
  transform: scale(.5);}
  to {top:0px;left: 500px;
  transform: scale(2.0);
  }
}

<h1>The @keyframes Rule</h1>

<div class="startname">
  <h6 class="alphabets" >
          <span class="letters">A</span>
          <span class="letters">B</span>
          <span class="letters">C</span>
          <span class="letters">D</span>
          <span class="letters fadeout">E</span>
          <span class="letters fadeout">F</span>
   </h6>
</div>
<div class="endname">
  <h6 class="alphabets" >
          <span class="letters">G</span>
          <span class="letters">H</span>
          <span class="letters fadeout">&nbsp;</span>      
          <span class="letters fadeout">I</span>
          <span class="letters fadeout">J</span>
    </h6>
</div>

Answer 5

这是一个经过修改的解决方案：

通过 Svelte 的 use:action 在超时后设置转换 class （class 必须有 :global() 标志，这样即使 class 没有被直接使用，它也会被编译。而且 class 都是需要的 :global(.letters.fadeout) 所以特异性足以覆盖第一个 class 的设置，因为这些元素添加了 Svelte 后缀 .letters.svelte-5nw7mj)
通过在 <h6> (a question on this)

display:flex

<span>

如果要设置动画宽度，则必须在 <span> 元素之前设置。这可以通过给它们 display: inline-block; 和所需的宽度

->>一个REPL

（我把时间缩短到3秒，所以试用起来更快...）

<script>
    function handleFadeout(node) {
        setTimeout(() => {
            node.classList.add('fadeout')
        },3000)
    }
</script>

<h1>The @keyframes Rule</h1>

<div class="startname">
    <h6 class="alphabets" >
        <span class="letters">A</span>
        <span class="letters">B</span>
        <span class="letters">C</span>
        <span class="letters">D</span>
        <span class="letters" use:handleFadeout>E</span>
        <span class="letters" use:handleFadeout>F</span>
    </h6>
</div>
<div class="endname">
    <h6 class="alphabets" >
        <span class="letters">G</span>
        <span class="letters">H</span>
        <span class="letters" use:handleFadeout>&nbsp;</span>      
        <span class="letters" use:handleFadeout>I</span>
        <span class="letters" use:handleFadeout>J</span>
    </h6>
</div>

<style>
    .startname {
        width: 150px;
        height: 150px;
        background: red;
        position: relative;
        animation: startnamemymove 3s 1 forwards;
        display: flex;
        align-items: center;
        justify-content:flex-end;

    }

    .endname {
        width: 150px;
        height: 150px;
        background: red;
        position: relative;
        animation: endnamemymove 3s 1 forwards;
        display: flex;
        align-items: center;
    }

    @keyframes startnamemymove {
        from {top: 0px;
            left:0px;
            transform: scale(.5);}
        to {top:150px;left: 200px;
            transform: scale(2.0);
        }
    }
    @keyframes endnamemymove {
        from {top: 100px;
            left:100px;
            transform: scale(.5);}
        to {top:0px;left: 500px;
            transform: scale(2.0);
        }
    }

    .letters {
        display: inline-block;
        width: 12px;
    }

    h6 {
        display:flex;
    }

    :global(.letters.fadeout) {
        opacity: 0;
        width: 0px;
        padding: 0;
        overflow: hidden;
        transition: all 300ms;
    }
</style>

几秒后 Span 标签消失

Span tag disappear after few seconds

javascript

css

svelte