Javascript 文本动画在其消失之前

发布于12月16日

我制作了文本显示和隐藏的动画，但我不知道如何让它正确工作.我编程不好，所以请帮帮忙.ㅤㅤㅤㅤㅤ

我的英语也不好，所以这是由谷歌翻译写的.

I want that when a button is pressed，a specific text with animation is srown，and another is hiding，and also when the"hide"button is pressed，the text is hiding，also with animation.I just don‘t know how to attach it.呼呼

function hide(Id) {
  document.getElementById(Id).style.display = "none";
}

function show(Id) {
  document.getElementById(Id).style.display = "block";
}

p {text-align: center;
}
@keyframes text-fade-in {
  0% {
    opacity: 0;
    transform: translateX(-10vw);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0vw);
  }
}

.text-fade-in {
  opacity: 0;
  animation-name: text-fade-in;
  animation-delay: 0.4s;
  animation-duration: 0.4s;
  animation-timing-function: easeOutCirc;
  animation-fill-mode: forwards;
}

@keyframes text-fade-out {
  0% {
    opacity: 1;
    transform: translateX(0vw);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateX(-10vw);
  }
}

.text-fade-out {
  opacity: 1;
  animation-name: text-fade-out;
  animation-delay: 0.4s;
  animation-duration: 0.4s;
  animation-timing-function: easeOutCirc;
  animation-fill-mode: forwards;
}

<button onclick="show('Text1'); hide('Text2'); hide('Text3')">Text1</button>

<button onclick="show('Text2'); hide('Text1'); hide('Text3')">Text2</button>

<button onclick="show('Text3'); hide('Text1'); hide('Text2')">Text3</button>

<button onclick="hide('Text1'); hide('Text2'); hide('Text3')">Hide </button>

<p class="text-fade-in" id="Text1" style="display:none">Text1</p>

<p class="text-fade-in" id="Text2" style="display:none">Text2</p>

<p class="text-fade-in" id="Text3" style="display:none">Text3</p>

@keyframes text-fade-in { 0% { opacity: 0; transform: translateX(-10vw); } 80% { opacity: 1; } 100% { opacity: 1; transform: translateX(0vw); } } .text-fade-in { opacity: 0; animation-name: text-fade-in; /* animation-delay: 0.4s; */ animation-duration: 0.4s; animation-timing-function: easeOutCirc; animation-fill-mode: forwards; } @keyframes text-fade-out { 0% { opacity: 1; transform: translateX(0vw); } 80% { opacity: 0; } 100% { opacity: 0; transform: translateX(-10vw); } } .text-fade-out { opacity: 1; animation-name: text-fade-out; /* animation-delay: 0.4s; */ animation-duration: 0.4s; animation-timing-function: easeOutCirc; animation-fill-mode: forwards; }

<body> <button onclick="show('Text1')">Text1</button> <button onclick="show('Text2')">Text2</button> <button onclick="show('Text3')">Text3</button> <button onclick="hide()">Hide all</button> <p class="text-fade-in" id="Text1" style="display:none" >Text1</p> <p class="text-fade-in" id="Text2" style="display:none" >Text2</p> <p class="text-fade-in" id="Text3" style="display:none" >Text3</p> </body>

Javascript 文本动画在其消失之前

推荐答案

Javascript相关问答推荐

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗？

如何解决CORS政策的问题

使用复选框在d3.js多折线图中添加或删除线条

. NET中Unix时间转换为日期时间的奇怪行为

判断表格单元格中是否存在文本框

使用LocaleCompare()进行排序时，首先使用大写字母

如何将Cookie从服务器发送到用户浏览器

在执行异步导入之前判断模块是否已导入()

TypeError：无法分解'；React2.useContext(...)'；的属性'；basename'；，因为它为空

AddEventListner，按键事件不工作

如何访问此数组中的值？

JavaScript将字符串数字转换为整数

按特定顺序将4个数组组合在一起，按ID分组

为什么这个最小Angular 的Licial.dev设置不起作用？

如何将对象推送到firestore数组？

JSX/React -如何在组件props 中循环遍历数组

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板？

从客户端更新MongoDB数据库

Select 所有输入.值

如何将缓冲区数组转换回音频