React動(dòng)畫(huà)

ThinkSNS 發(fā)布于2019-08-20 18:29 / 370人閱讀

摘要：一實(shí)現(xiàn)動(dòng)畫(huà)通過(guò)讓界面迅速發(fā)生變化但動(dòng)畫(huà)的哲學(xué)告訴我們變化要慢得用一個(gè)逐漸變化的過(guò)程來(lái)過(guò)渡從而幫助用戶理解頁(yè)面界面的變化可以分為節(jié)點(diǎn)或組件的增與減以及節(jié)點(diǎn)或?qū)傩缘淖兓渲刑峁┑哪軌驇椭覀儽憬莸淖R(shí)別出增加或刪除的組件從而讓我們能夠?qū)Ｗ⒂诟雍?jiǎn)

一.React實(shí)現(xiàn)動(dòng)畫(huà)

1.React通過(guò)setState讓界面迅速發(fā)生變化,但動(dòng)畫(huà)的哲學(xué)告訴我們,變化要慢,得用一個(gè)逐漸變化的過(guò)程來(lái)過(guò)渡,從而幫助用戶理解頁(yè)面.
界面的變化可以分為DOM節(jié)點(diǎn)(或組件)的增與減以及DOM節(jié)點(diǎn)(或?qū)傩?的變化.
其中React提供的ReactCSSTransition能夠幫助我們便捷的識(shí)別出增加或刪除的組件,
從而讓我們能夠?qū)Ｗ⒂诟雍?jiǎn)單的屬性變化的動(dòng)畫(huà).
2.這里統(tǒng)一將緩動(dòng)函數(shù)通過(guò)js實(shí)現(xiàn)的動(dòng)畫(huà)稱作js動(dòng)畫(huà),緩動(dòng)函數(shù)由css提供的動(dòng)畫(huà)稱作css動(dòng)畫(huà).
3.ReactCSSTransition插件就是利用CSS的Transition和animation來(lái)實(shí)現(xiàn)組件的出場(chǎng)和入場(chǎng)動(dòng)畫(huà).

二.CSS3 transition

1.css3過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果.

.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用于創(chuàng)建動(dòng)畫(huà),然后捆綁到某個(gè)選擇器.

@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兩個(gè)css屬性上實(shí)現(xiàn)的.
2.ReactCSSTransition工作原理
當(dāng)組件出現(xiàn)時(shí),會(huì)在組件添加transitionName-appear,然后下一時(shí)刻會(huì)給組件添加transitionName-appear-active類,
當(dāng)組件進(jìn)場(chǎng)時(shí),給組件添加transitionName-enter類,然后下一時(shí)刻會(huì)給組件添加transitionName-enter-active類;
當(dāng)組件出場(chǎng)時(shí),會(huì)給組件添加transitionName-leave類,然后下一時(shí)刻給組件添加transitionName-leave-active類,
我們則可以在css文件中,通過(guò)設(shè)置transition,設(shè)置我們需要執(zhí)行的動(dòng)畫(huà).
一般情況下,我們主要使用后兩種,并且,只有當(dāng)組件的出場(chǎng)動(dòng)畫(huà)完全執(zhí)行完以后,組件才會(huì)被移除.
2.ReactCSSTransitionGroup組件參數(shù)
ReactCSSTransitionGroup其實(shí)就是一個(gè)組件,他規(guī)定了特定的參數(shù),我們通過(guò)設(shè)置這些特定的參數(shù),將這些參數(shù)反應(yīng)到被其包裹的子組件中.
transitionName:設(shè)置動(dòng)態(tài)生成類的自定義前綴.
component:字符串,設(shè)置ReactCSSTransition生成包裹子組件的標(biāo)簽,默認(rèn)時(shí)span,我們可以通過(guò)這個(gè)參數(shù)自定義,如div,li
transitionEnter:布爾值,設(shè)置是否使用出場(chǎng)動(dòng)畫(huà),默認(rèn)時(shí)true.
transitionEnterTimeout:數(shù)值,設(shè)置入場(chǎng)動(dòng)畫(huà)的執(zhí)行時(shí)間,需要在css中和這里同時(shí)設(shè)置,否則會(huì)提示警告.
transitionLeave:布爾值,設(shè)置是否使用出場(chǎng)動(dòng)畫(huà),默認(rèn)時(shí)true.
transitionLeaveTimeout:數(shù)值,設(shè)置出場(chǎng)動(dòng)畫(huà)的執(zhí)行時(shí)間,需要在css中和這里同時(shí)設(shè)置,否則會(huì)提示警告.
3.使用步驟
1.引包

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

2.將ReactCSSTransition組件添加到render中
ReactCSSTransitionGroup組件需要添加到已經(jīng)掛載到頁(yè)面上的dom元素中.

淡入淡出實(shí)例

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;
}

輪播圖實(shí)例

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;
    } 
}