精华内容
下载资源
问答
  • React过渡动画-8

    2020-12-07 17:14:38
    yarn安装 yarn add react-transition-group react-transition-group 介绍 Transition 该组件是一个和平台无关的组件(不一定要结合CSS); CSSTransition CSSTransition 是基于Transition组件构建的; 在执行的过程...

    yarn安装 yarn add react-transition-group

    react-transition-group 介绍

    Transition

    该组件是一个和平台无关的组件(不一定要结合CSS);

    CSSTransition

    CSSTransition 是基于Transition组件构建的;
    在执行的过程中有三个状态:appear,enter,exit;

    三种状态需要定义对应的CSS样式:
    开始状态,对应的类是 -appear、-enter、-exit;
    执行状态,对应的类是 -appear-active、-enter-active、-exit-active;
    结束状态,对应的类是 -appear-done、-enter-done、-exit-done;

    CSSTransition常见对应的属性

    in: 触发进入或者退出状态,布尔值;
    当in为true时,触发进入状态,会添加-enter、-enter-acitve的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
    当in为false时,触发退出状态,会添加-exit、-exit-active的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
    classNames:动画class的名称;
    timeout:过渡动画的时间,控制类添加的时间;
    appear:是否在初次进入添加动画(需要和in同时为true);
    unmountOnExit:该组件是否在执行退出动画结束后被移除掉;

    CSSTransition对应的钩子函数

    onEnter:在进入动画之前被触发;
    onEntering:在进入动画时被触发;
    onEntered:在进入动画完成后被触发;
    onExit:在退出动画之前被触发;
    onExiting:在退出动画时被触发;
    onEnxited:在退出动画完成后被触发;

    SwitchTransition

    两个组件显示和隐藏切换时,使用该组件;
    两个组件之间切换的炫酷动画;

    SwitchTransition常见对应的属性

    mode,有两个值
    in-out: 表示新组件先进入,旧组件再移除;
    out-in: 表示就组件先移除,新组建再进入;

    如何使用SwitchTransition

    SwitchTransition组件里面要有CSSTransition或者Transition组件,不能直接包裹你想要切换的组件;
    SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态,取而代之的是key属性

    TransitionGroup

    将多个动画组件包裹在其中,一般用于列表中元素的动画;

    展开全文
  • react 过渡动画

    2021-08-13 20:42:52
    文章目录...两个组件之间切换的炫酷动画 TransitionGroup 列表使用 <TransitionGroup> { list.length > 0 && list.map(item => { return <CSSTransition

    yarn add react-transition-group
    

    CSSTransition

    单个组件切换显示隐藏使用

    SwitchTransition

    两个组件之间切换的炫酷动画

    TransitionGroup

    列表使用

     <TransitionGroup>
          {
           list.length > 0 && list.map(item => {
           return <CSSTransition
                 key={item.id}
                  classNames="friend"
                  timeout={300}
                  ><Children deleteOne={deleteOne} item={item}>
                   </Children></CSSTransition>
               })
    }
     </TransitionGroup>
    

    注意点 :TransitionGroup,CSSTransition必须相邻,CSSTransition只对其下的第一个起作用

    展开全文
  • React 过渡 动画

    2019-01-12 15:17:35
    过渡 // transition 过度属性 transition:all 2s ease-in 动画 // forwards 保留动画最后一帧的效果 .hide{ animation: item-hide 2s ease-in forwards; } @keyframes item-hide { 0%{ opacit...

    有关css的就不多说了,具体自己看文档。只是稍微在这里提个醒。

    过渡

    // transition 过度属性
    transition:all 2s ease-in
    

    动画

    // forwards 保留动画最后一帧的效果
    .hide{
      animation: item-hide 2s ease-in forwards;
    }
    
    @keyframes item-hide {
    	0%{
        opacity: 1;
        color: red;
      }
    	50%{
        opacity: 0.5;
        color:green;
      }
      100%{
        opacity: 0;
        color: blue
      }
    }
    

    只能实现简单的效果

    官方提供了一种react-transition-group动画,在这里说明几个常用的,具体可以自己看文档。比如钩子函数
    react-transition-group

    安装

    npm install react-transition-group -S
    

    CSSTransition

    操作单个对象

    	this.state = {
    			 show:true
    		}
    
    <CSSTransition
    	classNames="fade" // 写样式 以 .fade开始
    	in={this.state.show}  //初始状态
    	timeout={1000}  //延迟
    	unmountOnExit     // api 
    	onEntered={(el)=>{el.style.color='blue'}} // 利用对应钩子函数改变样式
    	appear={true} // 初始状态是否要动画效果
    	>
    	<div>hello world</div>
    </CSSTransition>
    
    	<button onClick={this.ChangeState.bind(this)}>改变</button>
    
    	ChangeState(){
    		this.setState({
    			show:this.state.show ? false:true
    		})
    	}
    

    style.css

    .fade-enter,.fade-active{  // fade-active与appear有关
      opacity: 0;
    }
    .fade-enter-active,.fade-appear-active{ // fade-appear-active与appear有关
      opacity: 1;
      transition: opacity 1s ease-in
    }
    .fade-enter{
      opacity: 1;
    }
    .fade-exit-active{
      opacity: 1;
      transition: opacity 1s ease-in
    }
    .fade-exit-done{
      opacity: 0;
    }
    

    TransitionGroup

              <ListGroup>
              <TransitionGroup className="todo-list">  // 最外层包裹
                {items.map(({ id, text }) => (
                  <CSSTransition      // 包裹单独item
                    key={id}
                    timeout={500}
                    classNames="fade"
                  >
                    <ListGroupItem>
                      <Button
                        onClick={() => {
                          this.setState(preventState => {
                            items: [...items,'新增项'] // 追加元素
                          }));
                        }}
                      >
                      </Button>
                    </ListGroupItem>
                  </CSSTransition>
                ))}
              </TransitionGroup>
              </ListGroup>
    
    如有问题,欢迎斧正
    展开全文
  • 轻量级React组件,用于使用CSS过渡设置高度动画。 向上/向下滑动该元素,并将其设置为任意特定高度。 内容的不透明度也可以选择设置动画(请检查下面的animateOpacity )。 CSS类适用于特定的动画状态,请检查...
  • React过渡动画 安装react-transition-group # npm npm install react-transition-group --save # yarn yarn add react-transition-group 可导入使用的有四个组件对象: Transition(不常用) CSSTransition(它的...

    React过渡动画

    安装react-transition-group

    # npm
    npm install react-transition-group --save
    # yarn
    yarn add react-transition-group
    

    可导入使用的有四个组件对象:

    • Transition(不常用)
    • CSSTransition(它的属性结合css控制组件出现、消失)
    • SwitchTransition(控制两个组件之间状态切换)
    • TransitionGroup(当有一组组件的动画时,需要使用它包裹)

    使用CSSTransition

    1】首先写css类名样式

    • CSSTransition执行过程中,有三个状态:appear、enter、exit;

    • 它们有三种状态,需要定义对应的CSS样式:

      • 第一类,开始状态:对于的类是-appear、-enter、-exit;
      • 第二类:执行动画:对应的类是-appear-active、-enter-active、-exit-active;
      • 第三类:执行结束:对应的类是-appear-done、-enter-done、-exit-done;
    .card-enter, .card-appear {
        opacity: 0;
        transform: scale(.8);
      }
      
      .card-enter-active, .card-appear-active {
        opacity: 1;
        transform: scale(1);
        transition: opacity 300ms, transform 300ms;
      }
      
      .card-exit {
        opacity: 1;
      }
      
      .card-exit-active {
        opacity: 0;
        transform: scale(.8);
        transition: opacity 300ms, transform 300ms;
      }
    

    2】CSSTransition组件属性

    • in:触发进入或者退出状态

      • 如果添加了unmountOnExit={true},那么该组件会在执行退出动画结束后被移除掉;
      • 当in为true时,触发进入状态,会添加-enter、-enter-acitve的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
      • 当in为false时,触发退出状态,会添加-exit、-exit-active的class开始执行动画,当动画执行结束后,会移除两个class,并且添加-enter-done的class;
    • classNames:动画class的名称

      • 决定了在编写css时,对应的class名称:比如card-enter、card-enter-active、card-enter-done;
    • timeout:

      • 过渡动画的时间
    • appear:

      • 是否在初次进入添加动画(需要和in同时为true)
    • 其他属性可以参考官网来学习:

      • https://reactcommunity.org/react-transition-group/transition

    CSSTransition对应的钩子函数:主要为了检测动画的执行过程,来完成一些JavaScript的操作

    • onEnter:在进入动画之前被触发;
    • onEntering:在应用进入动画时被触发;
    • onEntered:在应用进入动画结束后被触发;
    import React, { Component } from 'react'
    import { CSSTransition } from 'react-transition-group';
    import '../style/ReactTransition.css'
    
    interface IProps { }
    interface IState {
        isShowCard: boolean
    }
    class ReactTransition extends Component<IProps, IState> {
        constructor(props) {
            super(props)
            this.state = {
                isShowCard: true
            }
        }
        render() {
            return (
                <div>
                    <button onClick={e => this.setState({ isShowCard: !this.state.isShowCard })}>显示/隐藏</button>
                    <CSSTransition
                        in={this.state.isShowCard}//为true进入显示组件(主要通过in属性来控制组件状态)
                        classNames="card"//设置类名的前缀
                        timeout={1000}//设置过渡动画事件
                        unmountOnExit={true}//消失动画结束后 + display:none
                    >
                        <div>哈哈哈</div>
                    </CSSTransition>
                </div>
            )
        }
    }
    
    export default ReactTransition
    

    在这里插入图片描述

    使用SwitchTransition

    SwitchTransition可以完成两个组件之间切换的炫酷动画:

    • 比如我们有一个按钮需要在on和off之间切换,我们希望看到on先从左侧退出,off再从右侧进入;
    • 这个动画在vue中被称之为 vue transition modes;
    • react-transition-group中使用SwitchTransition来实现该动画;

    SwitchTransition中主要有一个属性:mode,有两个值

    • in-out:表示新组件先进入,旧组件再移除;
    • out-in:表示就组件先移除,新组建再进入;

    SwitchTransition还是需要通过CSSTransition来进行控制,使用key属性来控制(不能使用in属性)

    • SwitchTransition组件里面要有CSSTransition或者Transition组件,不能直接包裹你想要切换的组件;
    • SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态,取而代之的是key属性;
    import React, { Component } from 'react'
    import { CSSTransition, SwitchTransition } from 'react-transition-group';
    import '../style/ReactTransitionSwitch.css'
    
    interface IProps {
    
    }
    interface IState {
        isOn: boolean
    }
    class ReactTransitionSwitch extends Component<IProps, IState> {
        constructor(props: IProps) {
            super(props)
            this.state = {
                isOn: true
            }
        }
        render() {
            const { isOn } = this.state;
            return (
                <div>
                    <SwitchTransition mode="out-in">
                        <CSSTransition classNames="btn"
                            timeout={500}
                            key={isOn ? "on" : "off"}>
                            {
                                <button onClick={() => {
                                    this.setState({ isOn: !isOn })
                                }}>
                                    {isOn ? "on" : "off"}
                                </button>
                            }
                        </CSSTransition>
                    </SwitchTransition>
                </div>
            )
        }
    }
    
    export default ReactTransitionSwitch
    

    ReactTransitionSwitch.css

    .btn-enter {
      transform: translate(100%, 0);
      opacity: 0;
    }
    
    .btn-enter-active {
      transform: translate(0, 0);
      opacity: 1;
      transition: all 500ms;
    }
    
    .btn-exit {
      transform: translate(0, 0);
      opacity: 1;
    }
    
    .btn-exit-active {
      transform: translate(-100%, 0);
      opacity: 0;
      transition: all 500ms;
    }
    

    在这里插入图片描述
    在这里插入图片描述

    使用TransitionGroup

    当我们有一组动画时,需要将这些CSSTransition放入到一个TransitionGroup中来完成动画:

    import React, { PureComponent } from 'react'
    import { CSSTransition, TransitionGroup } from 'react-transition-group';
    import '../style/ReactTransitionGroup.css';
    
    interface Iprops {
    
    }
    interface Istate {
        friends: Array<string>,
        count: number
    }
    class ReactTransitionGroup extends PureComponent<Iprops, Istate> {
        constructor(props: Iprops) {
            super(props);
            this.state = {
                friends: [],
                count: 0
            }
        }
    
        render() {
            return (
                <div>
                    <TransitionGroup>
                        {
                            this.state.friends.map((item, index) => {
                                return (
                                    <CSSTransition classNames="friend" timeout={300} key={index}>
                                        <div>{item}
                                            <button onClick={() => {
                                                let friends = [...this.state.friends]
                                                friends.splice(index, 1)
                                                this.setState({ friends: friends })
                                            }}>&times;</button>
                                        </div>
                                    </CSSTransition>
                                )
                            })
                        }
                    </TransitionGroup>
                    <button className='buttonAdd' onClick={() => {
                        this.setState({
                            friends: [...this.state.friends, (this.state.count + 1).toString()],
                            count: this.state.count + 1
                        })
                    }}>+friend</button>
                </div>
            )
        }
    }
    export default ReactTransitionGroup
    

    ReactTransitionGroup.css

    .friend-enter {
        opacity: 0;
    }
    
    .friend-enter-active {
        opacity: 1;
        transition: opacity 500ms ease-in;
    }
    
    .friend-exit {
        opacity: 1;
    }
    
    .friend-exit-active {
        opacity: 0;
        transition: opacity 500ms ease-in;
    }
    
    .buttonAdd {
        position: absolute;
        top: 50%;
        left: 55%;
    }
    

    在这里插入图片描述

    展开全文
  • 官方提供了 react-transition-group 库来实现过渡动画,与vue官方提供的 transition 很类似,利用它实现过渡动画。 一、安装 npm : npm install react-transition-group --save yarn : yarn add react-transition-...
  • React实现CSS过渡动画

    2019-05-22 17:37:12
    1.简单的过渡动画效果 import React,{Component,Fragment} from 'react'; import './App.css'; class App extends Component{ constructor(){ super() this.state={ show:true } this.handleClick = ...
  • 那在React中应该如何给路由切换添加过渡动画呢? react-transition-group 我们需要借助React的官方动画库react-transition-group,文档戳这里 react-transition-group提供了三个React组件,分别是,<CSS
  • 当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group用来完成过渡动画React曾为开发者提供过动画插件react-addons-css-transition-group,后由社区维护,形成了...
  • 在本文中,我将向你展示如何使用 ReactTransitionGroup 和 Animated 库中的生命周期方法来实现页面的过渡效果。
  • 基于react-transition-group的react过渡动画 react-transition-group是react官方提供的动画库,Transition的源码浅析,本项目中目前实现了一种场景下的过渡动画:点击标签,路由跳转,挂载与卸载需要过渡动画的组件。...
  • 当然,我们可以通过原生的CSS来实现这些过渡动画,但是React社区为我们提供了react-transition-group用来完成过渡动画。 一. react-transition-group介绍 React曾为开发者提供过动画插件 react-addons-css-...
  • github仓库地址:...这里主要讲解使用react-transition-group里面的CSSTransition实现动画。 使用CSSTransition实现动画,一共分三步: 1.引用CSSTransition 1 import { CSSTransition } from 'react-tran...
  • React 条件渲染过渡动画 欢迎到我的博客下与我讨论React 条件渲染过渡动画 最近技术栈转为React开发,发现React虽然有条件渲染,但是没有像Vue一样自带条件渲染的过渡组件,一般大家推荐使用React官方维护的React ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,007
精华内容 1,602
关键字:

react过渡动画