React动画

ThinkSNS 发布于2019-08-20 18:29 / 236人阅读

摘要：一实现动画通过让界面迅速发生变化但动画的哲学告诉我们变化要慢得用一个逐渐变化的过程来过渡从而帮助用户理解页面界面的变化可以分为节点或组件的增与减以及节点或属性的变化其中提供的能够帮助我们便捷的识别出增加或删除的组件从而让我们能够专注于更加简

一.React实现动画

1.React通过setState让界面迅速发生变化,但动画的哲学告诉我们,变化要慢,得用一个逐渐变化的过程来过渡,从而帮助用户理解页面.
界面的变化可以分为DOM节点(或组件)的增与减以及DOM节点(或属性)的变化.
其中React提供的ReactCSSTransition能够帮助我们便捷的识别出增加或删除的组件,
从而让我们能够专注于更加简单的属性变化的动画.
2.这里统一将缓动函数通过js实现的动画称作js动画,缓动函数由css提供的动画称作css动画.
3.ReactCSSTransition插件就是利用CSS的Transition和animation来实现组件的出场和入场动画.

二.CSS3 transition

1.css3过渡是元素从一种样式逐渐改变为另一种的效果.

.ani2 {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    transition: width 1s, transform 1s;
    animation: myfirst 3s infinite;
    &:hover {
        width: 200px;
        transform: rotate(360deg);
    }
}

三.css3 animation

1.@keyframes用于创建动画,然后捆绑到某个选择器.

@keyframes myfirst {
    0% {
        background: #f00;
    }
    50% {
        background: #0f0;
    }
    100% {
        background: #ccc;
    }
}

.ani2 {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    transition: width 1s, transform 1s;
    animation: myfirst 3s infinite;
    &:hover {
        width: 200px;
        transform: rotate(360deg);
    }
}

四.react-addons-css-transition-group插件

1.react-addons-transition-group插件,就是在transition和animation两个css属性上实现的.
2.ReactCSSTransition工作原理
当组件出现时,会在组件添加transitionName-appear,然后下一时刻会给组件添加transitionName-appear-active类,
当组件进场时,给组件添加transitionName-enter类,然后下一时刻会给组件添加transitionName-enter-active类;
当组件出场时,会给组件添加transitionName-leave类,然后下一时刻给组件添加transitionName-leave-active类,
我们则可以在css文件中,通过设置transition,设置我们需要执行的动画.
一般情况下,我们主要使用后两种,并且,只有当组件的出场动画完全执行完以后,组件才会被移除.
2.ReactCSSTransitionGroup组件参数
ReactCSSTransitionGroup其实就是一个组件,他规定了特定的参数,我们通过设置这些特定的参数,将这些参数反应到被其包裹的子组件中.
transitionName:设置动态生成类的自定义前缀.
component:字符串,设置ReactCSSTransition生成包裹子组件的标签,默认时span,我们可以通过这个参数自定义,如div,li
transitionEnter:布尔值,设置是否使用出场动画,默认时true.
transitionEnterTimeout:数值,设置入场动画的执行时间,需要在css中和这里同时设置,否则会提示警告.
transitionLeave:布尔值,设置是否使用出场动画,默认时true.
transitionLeaveTimeout:数值,设置出场动画的执行时间,需要在css中和这里同时设置,否则会提示警告.
3.使用步骤
1.引包

var ReactCSSTransitionGroup = require("react-addons-css-transition-group");

2.将ReactCSSTransition组件添加到render中
ReactCSSTransitionGroup组件需要添加到已经挂载到页面上的dom元素中.

淡入淡出实例

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: ["1111", "2222", "3333", "4444"]
        };
    }
    handleAdd = () => {
        var newItems = this.state.items.concat([prompt("enter some text")]);
        this.setState({
            items: newItems
        });
    }
    handleRemove = (i) => {
        var newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({
            items: newItems
        });
    }
    render() {
        return (
            
                
                
                    {
                        this.state.items.map((item, i) => {
                            return (
                                
                                    { item }
                                
                            )
                        })
                    }
                
            
        );
    }
}

.example-enter {
    opacity: 0.01;
}
.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}
.example-leave {
    opacity: 1;
}
.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}

轮播图实例

class ImageCarousel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            a: [
                "https://s1.sonkwo.com/FhXx9C5gqykP4UUJHPKfpS1cexVP",
                "http://7fvk4m.com1.z0.glb.clouddn.com/Fjn9lT9RdzW1dpIJ_7vSrxB4UKNB",
                "http://7fvk4m.com1.z0.glb.clouddn.com/FsDTCVnB9DYkWF-m0p7zNdVfadTg"
            ],
            current: 0
        };
    }
    componentDidMount() {
        setInterval(() => {
            let current = this.state.current;
            current++;
            if (current > this.state.a.length - 1) {
                current = 0;
            }
            this.setState({
                current
            });
        }, 5000);
    }
    render() {
        let { a, current } = this.state;

        return (
            
                
                    
                
            
        );
    }
}

.react-slide {
    li {
        width: 440px;
        height: 260px;
        overflow: hidden;
    }

    .carousel-enter {
        opacity: 0.01;
    }
    .carousel-enter.carousel-enter-active {
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }
    .carousel-leave {
        opacity: 1;
    }
    .carousel-leave.carousel-leave-active {
        opacity: 0.01;
        transition: opacity 1s ease-in-out;
    } 
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84593.html

让React应用“动”起来

摘要：因为其组件只是根据提供的及属性，生成动画的数据，业务应用中拿到生成的数据后根据需要添加需要动画的组件样式。除了上述简单的动画应用，在复杂动画的实现方面，表现非常优越。 WEB应用中动画很重要不管是web应用还是原生应用，也不论是PC端应用还是移动端应用，动画都扮演了一个重要的角色。尽管动画并不会添加应用的实际动能，但一个好的动画，一个流畅且优雅，选择在恰当时机出现的动画，能为应用增...

xiyang 2019-08-22 16:47 评论0 收藏0
React Web 动画的 5 种创建方式，每一种都不简单

摘要：以前一直投入在中，写动画的时候不是用中的，就是依赖像这样的库，最近转向，在得到很多大佬关于动画的回应，于是决定分享给大家，如有其他见解，非常欢迎在下面评论中交流以下便是本文要分享的创建动画的几种方式下面，勒次个特斯大特一特给元素添加是最简单以前一直投入在 React Native 中，写动画的时候不是用 CSS 中的 transitions / animations，就是依赖像 Gr...

solocoder 2019-08-21 11:54 评论0 收藏0
React动画实现原理

摘要：动画的实现原理要实现动画，究其根本，最终的落地依然是操作从而达到页面呈现动画的目的。声明：当前为草稿阶段。然后有人可以指引下怎么写草稿文章么~ web动画的实现原理 web动画的实现，最终都是需要操作dom。CSS动画，是给相应的dom元素添加动画className ; JS动画，则是通过定时器或其他手段，不断更改dom元素属性值，达到动画的目的。 React动画的实现原理 Re...

mrli2016 2019-08-22 17:03 评论0 收藏0
探究 React Native 中 Props 驱动的 SVG 动画和 Value 驱动动画

摘要：再来看前端，前端的动画实现，经过多年的发展，已分为动画和动画。此外还探究了驱动动画在实现方法上的不同之处。驱动的动画接下来看驱动的动画。改造后的函数如下关键修改，强制刷新。对于，函数是可行的，然而对无效。引言一直以来，动画都是移动开发中极为特殊的一块。一方面，动画在交互体验上有着不可替代的优越处，然而另一方面，动画的开发又极为的耗时，需要消耗工程师大量的时间用于开发和调试。再来看前...

Codeing_ls 2019-08-19 17:58 评论0 收藏0
React源码剖析系列－玩转 React Transition

摘要：后面将会仔细分析的源码实现。更新完成后，对中的每个元素执行动画的逻辑，对中的每个元素执行动画的逻辑。事实上，原因很简单，事件在某些情况是不会被触发。总结动画是组件初次后，才会被添加到的所有子元素上。参考资料官方文档事件过去一年，React 给整个前端界带来了一种新的开发方式，我们抛弃了无所不能的 DOM 操作。对于 React 实现动画这个命题，DOM 操作已经是一条死路，而 CSS...

rottengeek 2019-08-19 17:13 评论0 收藏0
【译】React Native 动画 API 入门实例

摘要：简而言之，它将对动画中变化的属性数值做插值运算并且刷新视图。注意我们所建立的的是的一个实例。最后我们使用，表示这个组件是可动画组件。一直不停动动画序列的方法可以传一个回调函数，在动画全部执行完时触发。翻译自 React-native Animated API Basic Example 翻译过程中有删改简介本文是探索 react-native 中实现的的 Animated AP...

qianfeng 2019-08-19 17:54 评论0 收藏0