怎么在html中添加js动画,react怎么加动画

React 中实现CSS过渡动画 与 动画效果

我们先在项目的src目录下，新建一个文件App.js ,代码如下。import React, { Component, Fragment } from 'react'

class App extends Component {

render() {

return (

hello

toggle

)

}

}

export default App;

然后再修改src 目录下的index.js 文件如下。import React from 'react';

import ReactDOM from 'react-dom';

// import TodoList from './TodoList';

import App from './App'

import './style.css'

ReactDOM.render(, document.getElementById('root'));

好了，然后我们再来更改App.js 中代码添加样式。下面我们通过点击按钮就修改了文字的class 。import React, { Component, Fragment } from 'react'

class App extends Component {

constructor(props) {

super(props);

this.state = {

show: true

}

this.handleToggle = this.handleToggle.bind(this)

}

render() {

return (

hello

toggle

)

}

handleToggle() {

this.setState({

show: this.state.show ? false : true

})

}

}

export default App;

然后我们在src下创建一个style.css 文件。

先在App.js 中引入这个文件import './style.css'

然后在style.css中，使用CSS3 特性添加过渡的效果。如下。.show {

opacity: 1;

transition: all 1s ease-in;

}

.hide {

opacity: 0;

transition: all 1s ease-in;

}

下面我们使用CSS3 中的动画效果来显示隐藏div，即使用 keyframes。如下。.show {

animation: show-item 2s ease-in forwards;

}

.hide {

animation: hide-item 2s ease-in forwards;

}

@keyframes show-item {

0% {

opacity: 0;

color: red;

}

50% {

opacity: 0.5;

color: green;

}

100% {

opacity: 1;

color: blue;

}

}

@keyframes hide-item {

0% {

opacity: 1;

color: red;

}

50% {

opacity: 0.5;

color: green;

}

100% {

opacity: 0;

color: blue;

}

}

更多相关技术文章，请访问HTML中文网！