应用动画以删除文本

Question

我实现了一个类似导航选项卡的视图。三个按钮，当我们单击一个按钮时，与其他两个按钮对应的文本将被隐藏。但我希望当我们更新文本时，我们必须看到一些动画，如淡入。

var prevId = 1;
function updateView(id) {
    document.getElementById("subsec"+prevId).style.visibility = "hidden";
    document.getElementById("subsec"+id).style.visibility = "visible";
    prevId = id;
}

<div id="subsec1" >
  Tab 1
</div>
<button onclick="updateView(1)"></button>

<div id="subsec2" style="visibility: hidden">
  Tab 2
</div>
<button onclick="updateView(2)"></button>

<div id="subsec3"  style="visibility: hidden">
  Tab 3
</div>
<button onclick="updateView(3)"></button>

谁能帮我解决这个问题。我附上了一个我的观点的例子。示例：我目前在选项卡 3 上，我单击选项卡 1，然后选项卡 3 的内容应该消失，但通过动画和选项卡 1 的内容必须仅通过动画出现在屏幕上（如淡入）。

Answer 1

请阅读this from w3schools.com。

尝试添加css赞

.fadeIn {
    animation-name: FadeIn;
    animation-duration: 4s;
    animation-fill-mode: both;
}

.fadeOut {
    animation-name: FadeOut;
    animation-duration: 4s;
    animation-fill-mode: both;
}

@keyframes FadeIn {
    from { opacity: 0%; }
    to { opacity: 100%; }
}

@keyframes FadeOut {
    from { opacity: 100%; }
    to { opacity: 0%; }
}

然后像这样添加 javascript：

var prevId = 1;
function updateView(id) {
    document.getElementById("subsec"+prevId).className = "fadeOut";
    document.getElementById("subsec"+id).className = "fadeIn";
    preId = id;
}

将 html 中的 visibility: 替换为 opacity: 0%，如果您希望它们在开头有动画，请将类设置在开头。

这没有优化。

Answer 2

我想展示一下如何使用稍微简化的 HTML 标记和修改后的按钮 clickhandler 函数来触发向选项卡添加新样式（动画）。

此处的 CSS 动画是非常基本的示例，但应该用于说明淡入的效果。

const clickhandler=function(e){
  document.querySelectorAll('button[data-tab]').forEach(bttn=>bttn.classList.remove('activebttn') );
  document.querySelectorAll('div[data-tab]').forEach( div=>div.classList.remove('active','initial') );
  document.querySelector('div[ data-tab="'+this.dataset.tab+'" ]').classList.add('active');
  this.classList.add('activebttn');
}

document.querySelectorAll('button[data-tab]').forEach( bttn=>bttn.addEventListener('click',clickhandler) );

div[data-tab]{
  background:white;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:1rem 0 1rem 0;
  box-shadow:0 0 1rem rgba(0,0,0,0.25);
  margin:1rem auto;
  width:600px;
  min-height:400px;
  padding:1rem;
  opacity:0;
}
div[data-tab]:not(.active){
  display:none;
}
@keyframes fadein{
  0%   { opacity:0; }
  100% { opacity:1; background:whitesmoke; }
}
@keyframes fadeout{
  0%{ opacity:100%;display:block; }
  100%{ opacity:0%; background:white; display:none; }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.active{
  animation-name:fadein, shake;
  animation-duration:1s, 1s;
  animation-timing-function:ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 250ms,750ms;
}
.hide{
  animation-name:fadeout;
  animation-duration:1s;
  animation-timing-function:ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 250ms;
}
.initial{
  display:block!important;
  opacity:1!important;
}
button{
  background:rgba(0,0,0,0.25);
  border-radius:1rem;
  border:1px solid transparent;
  width:200px;
  cursor:pointer;
  padding:1rem;
  transition:ease-in-out 250ms all;
}
button:hover{
  border:1px solid gray;
  background:rgba(255,255,255,0.25);
  box-shadow:0 0 5px rgba(0,0,0,0.25);
}
button:active,
.activebttn{
  border:1px solid gray;
  background:rgba(0,255,0,0.25);
}

<button data-tab=1>Tab 1</button>
<button data-tab=2>Tab 2</button>
<button data-tab=3>Tab 3</button>



<div data-tab=1 class='initial'>
  Code finance. Let's put a pin in that one-sheet we need to button up our approach optimize for search nor my supervisor didn't like the latest revision you gave me can you switch back to the first revision?.
</div>
<div data-tab=2>
  We need to socialize the comms with the wider stakeholder community prairie dogging, roll back strategy drink the Kool-aid meeting assassin, but form without content style without meaning, yet can we jump on a zoom.
</div>
<div data-tab=3>
  Cloud native container based knowledge process outsourcing blue sky. Tribal knowledge. I called the it department about that ransomware because of the old antivirus, but he said that we were using avast 2021 let's schedule a standup during the sprint to review our kpis.
</div>

应用动画以删除文本

Apply animation to remove a text

html

javascript

css

tabs

css-animations