渲染页面时如何禁用动画？答案

【问题标题】：how to disable animation when rendering a page?渲染页面时如何禁用动画？
【发布时间】：2021-02-06 18:50:34
【问题描述】：

需要在按下按钮时，有文字的出现和隐藏的动画。我写了以下代码，但是当页面渲染时，会触发文本隐藏动画。我可以关闭呈现页面时触发的动画吗？示例代码如下。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  let [vision, setVision] = useState(true);
  let hangler = () => {
    setVision(!vision);
  };
  return (
    <div className="App">
      <h1 className={vision ? "Text hidden" : "Text shown"}>Hello World</h1>
      <button onClick={hangler}>click</button>
    </div>
  );
}

CSS：

.App {
  font-family: sans-serif;
  text-align: center;
}
.Text {
  color: blue;
}
.hidden {
  animation: fadeOut ease 1.5s;
  animation-fill-mode: forwards;
}

.shown {
  animation: fadeIn ease 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

此代码在此link

【问题讨论】：

标签： css reactjs css-animations

【解决方案1】：

你的类是倒置的，应该是vision ? "Text shown" : "Text hidden"。

这仍然会使标题动画淡入。如果没问题，那么你就完成了。

但是，如果您不想要初始动画。您可以设置animation-duration: 0s; 使其短路并在加载后删除该属性，但这并不优雅。

对于一些简单的东西，我会使用过渡。

.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s, visibility 1.5s;
}

.shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.5s, visibility 1.5s;
}

【讨论】：