本篇文章给大家谈谈css–在React中缓解过渡，以及reactcss解决方案的知识点，同时本文还将给你拓展12react基础的css过渡动画及动画效果及使用react-transition-grou
本篇文章给大家谈谈css – 在React中缓解过渡，以及react css解决方案的知识点，同时本文还将给你拓展12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画、2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法、css – 如何在React Create-React-APP中使用LESS预处理器、css – 如何在React中创建样式元素并追加？等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：- css – 在React中缓解过渡（react css解决方案）
- 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
- 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法
- css – 如何在React Create-React-APP中使用LESS预处理器
- css – 如何在React中创建样式元素并追加？
css – 在React中缓解过渡（react css解决方案）
代码在下面,我有一个按钮,使消息出现.两秒钟后,它正在逐渐消失,但是我希望消息在离开时消失……但显然我在React-ish转换CSS中误解了它的含义.
这是React组件：
class MessageSender extends React.Component {
render() {
let sent_element = null;
if (this.state.linkSent) {
sent_element = <AnimatedText/>;
}
return (
<div>
{sent_element}
</div>
);
//A fetch then triggers:
...then((json) => {
if (json.success) {
_this.setState({
linkSent: true
})
setTimeout(
function(){
_this.setState({linkSent:false});
},2000
)
}
});
}
class AnimatedText extends React.Component {
render() {
return <ReactTransitionGroup transitionAppear={true} transitionName="fadeInOut">
<div>Sent!</div>
</ReactTransitionGroup>;
}
}
这是CSS：
.fadeInOut-appear {
opacity: 0.01;
transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
}
.fadeInOut-appear.fadeInOut-appear-active {
opacity: 1;
}
.fadeInOut-leave {
opacity: 1;
transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
}
.fadeInOut-leave.fadeInOut-leave-active {
opacity: 0.01;
}
解决方法
import `ReactCsstransitionGroup` from "react-addons-css-transition-group";
在React中> v0.14,如果你启用了transitionAppear,你还必须将transitionEnterTimeout transitionLeaveTimeout和可选的transitionAppearTimeout props传递给组件(你可以这样做).
最后,您需要将key-attribute传递给动画孩子
You must provide the key attribute for all children of ReactCsstransitionGroup,even when only rendering a single item. This is how React will determine which children have entered,left,or stayed.
您可能还需要重构一下代码,以便您的ReactCsstransitionGroup不在< AnimatedText>内,而是包裹在您的{sent_element}中
有关更多信息,请参见React/Animation-docs.
12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一。过渡动画
# index.js
import React from ''react'';
import ReactDOM from ''react-dom'';
import App from ''./app'';
ReactDOM.render(<App />, document.getElementById(''root''));# app.js
import React, { Component, Fragment } from ''react'';
import ''./style.css'';
class app extends Component{
constructor(props){
super(props);
this.state = {
show : true
};
this.DivToggle = this.DivToggle.bind(this);
}
DivToggle(){
console.log(this.state.show)
this.setState({
show: this.state.show ? false : true
})
}
render() {
return (
<Fragment>
<div className={this.state.show? ''show'': ''hide''}>你好啊</div>
<button onClick={this.DivToggle}>toggle</button>
</Fragment>
)
}
}
export default app;# style.css
.show{
opacity: 1;
transition: all 1s ease-in;
}
.hide{
opacity: 0;
transition: all 1s ease-in;
}
二。动画效果
使用 keyframes 进行渲染 动画
# style.css
.show{
/* 使用 forwards css 动画最后一帧 保存 样式*/
animation: show-item 2s ease-in forwards;
}
.hide{
/* 使用 forwards css 动画最后一帧 保存 样式*/
animation: hide-item 2s ease-in forwards;
}
@keyframes hide-item {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 0;
color: blue;
}
}
@keyframes show-item {
0% {
opacity: 0;
color: blue;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 1;
color: red;
}
}
三。使用 react-transition-group CSSTransition 实现动画 (github 地址) (文档)
1. 安装 react-transition-group
yarn add react-transition-group
2. 引入 css-transition
import { CSSTransition } fron ''react-transition-group''
3. 将要 改变样式的元素用 CSSTransition 标签包裹起来
eg:
# index.js
import React from ''react'';
import ReactDOM from ''react-dom'';
import App from ''./app'';
ReactDOM.render(<App />, document.getElementById(''root''));
# app.js
import React, {Component, Fragment} from ''react'';
import {CSSTransition} from ''react-transition-group''
import ''./style.css''
class app extends Component
{
constructor(props){
super(props);
this.state={
show : true
}
this.DivToggle = this.DivToggle.bind(this);
}
DivToggle(){
console.log(this.state.show);
this.setState({
show: this.state.show? false : true
});
}
render(){
return (
<Fragment>
<CSSTransition
in={this.state.show}
timeout={1000}
classNames = "fade"
// 当隐藏后 去除挂载
unmountOnExit
// 当显示完成时 颜色变蓝 el 指 CSSTransition 内包裹的元素
onEntered={(el)=>{ el.style.color=''red'' }}
// 当退出显示时 颜色变黑 el 指 CSSTransition 内包裹的元素
onExited={(el)=>{ el.style.color=''black'' }}
// 第一次入场动画也要引入动画
appear={true}
>
<div className={this.state.show?''show'':''hide''}>hello</div>
</CSSTransition>
<button type="button" onClick={this.DivToggle}> 点一下 </button>
</Fragment>
);
}
}
export default app;
#style.css
四。使用 react-transition-group CSSTransition TransitionGroup 实现多个元素样式动画
#index.js
import React from ''react'';
import ReactDOM from ''react-dom'';
import App from ''./app'';
ReactDOM.render(<App />, document.getElementById(''root''));
#app.js
import React, {Component, Fragment} from ''react'';
import {CSSTransition, TransitionGroup} from ''react-transition-group''
import ''./style.css''
class app extends Component
{
constructor(props){
super(props);
this.state={
list : []
}
this.AddItem = this.AddItem.bind(this);
}
AddItem (){
this.setState((prevState)=>{
return {
list : [...prevState.list, ''item'']
}
})
}
render(){
return (
<Fragment>
{/* TransitionGroup 包裹住要展示动画的元素 */}
<TransitionGroup>
{
this.state.list.map((val, index)=>{
return (
// 内部要展示样式的元素 使用 CSSTransition 包裹并边写动画效果
// 这时可以删除 in 效果 没有手动点击变换效果
<CSSTransition
timeout={1000}
classNames="fade"
onEntered={(el)=>{el.style.color="red"}}
appear={true}
key={index}
>
<div key={index} >{val}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button type="button" onClick={this.AddItem}> 点一下 </button>
</Fragment>
);
}
}
export default app;
#style.css
2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法
Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。相信每个前端开发者都对这种css预处理器有所耳闻。
小提示: 在使用不同的预处理器时，请根据预处理的文档替换build-css和watch-css命令。
react sass scss设置全局变量全局函数
-
1.安装 sass-resources-loader
-
2.暴露配置文件 npm run eject //如果这一步报错,可能是安装了git后出现的问题,解决方案是:
-
git add .
-
git commit -am "Save before ejecting"
-
npm run eject
-
这样就能eject了
-
3.修改 config 里面的 webpack.config.js
提示: ''./../src/common.scss'' 这个是我的公共的sass路径 根据你自己的来配置
css – 如何在React Create-React-APP中使用LESS预处理器
React Code
ReactDOM.render(
<form>
<input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/" required title="Please enter value" required="required"/>
<input type="submit"/>
</form>,document.getElementById('root'))
index.less
body{
background: red;
}
解决方法
你应该使用node-sass-chokidar npm包：
npm install node-sass-chokidar --save-dev
然后将以下内容添加到package.json中的npm脚本中：
"build-css": "node-sass-chokidar src/ -o src/","watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
观察者将在src子目录中找到每个Sass文件,并在其旁边创建相应的CSS文件.
请记住从源代码管理中删除所有css文件,并将src / ** / *.css添加到.gitignore.
最后,您可能希望使用npm start自动运行watch-css,并将build-css作为npm run build的一部分运行.为此,安装以下npm包,以便能够顺序执行两个脚本：
npm install --save-dev npm-run-all
然后将package.json文件中的npm start和build脚本更改为以下内容：
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/","watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
"start-js": "react-scripts start","start": "npm-run-all -p watch-css start-js","build": "npm run build-css && react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
}
有关详细信息,请参阅此链接：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
css – 如何在React中创建样式元素并追加？
我正在学习React,并且(更重要的是)试图了解反应是如何实际运作的.
我有一些生成的CSS,我想作为样式元素追加到头部.在js land中,这将是：
const $style = document.createElement("style");
document.head.appendChild($style);
const randBlue = ~~(Math.random() * 250);
$style.innerHtml = `body { color: rgb(10,10,${randBlue}); }`;
不幸的是,在React的土地上,事情在这方面似乎不太直白.我对此的理解是,将所有样式添加到willy nilly是不好的做法,因为有足够的人做这件事会导致问题.我也认识到大多数人都使用样式组件,魅力四射,样式化的jsx,或内联生成的CSS,因为它们可以避免上述威利猥亵可能产生的许多问题.
但我不想使用我不了解的模块,据我所知,上面的大多数创建样式元素并以某种方式将它们添加到头部,我想知道如何.
所以,如果我在React中并且有一些生成的css文本：
const randomColor = Math.random() > 0.5 ? "red" : "blue";
const generatedCss = `body { color: ${randomColor}; }`;
这里有什么？
createStyleElementAndAppendToHead(generatedCss) {
// mystery code
};
确实,在反应土地上有人们会像风格组件,迷人,风格-jsx,内联等一样推动你的最佳实践.我甚至会推荐这些.
关于Reactjs的重要部分是可以使用vanilla javascript.可以在生命周期componentDidMount中使用相同的代码片段
componentDidMount() {
const $style = document.createElement("style");
document.head.appendChild($style);
const randBlue = ~~(Math.random() * 250);
$style.innerHTML = `body { color: rgb(10,${randBlue}); }`;
}
或者你甚至可以像这样定位身体的内联样式：
componentDidMount() {
const randBlue = ~~(Math.random() * 250);
document.body.style.color = `rgb(10,${randBlue})`;
}
React Hooks更新：
把它放在功能组件的开头
useEffect(() => {
const randBlue = ~~(Math.random() * 250);
document.body.style.color = `rgb(10,${randBlue})`;
});
关于css – 在React中缓解过渡和react css解决方案的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画、2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法、css – 如何在React Create-React-APP中使用LESS预处理器、css – 如何在React中创建样式元素并追加？的相关信息，请在本站寻找。
本文标签：
