Я использую ReactFire для легкой интеграции Firebase.
В основном, это помогает мне хранить данные в состоянии компонента, как array
. Тогда все, что мне нужно использовать, это функция reverse()
( подробнее )
Вот как я это достигаю:
import React, { Component, PropTypes } from 'react';
import ReactMixin from 'react-mixin';
import ReactFireMixin from 'reactfire';
import Firebase from '../../../utils/firebaseUtils'; // Firebase.initializeApp(config);
@ReactMixin.decorate(ReactFireMixin)
export default class Add extends Component {
constructor(args) {
super(args);
this.state = {
articles: []
};
}
componentWillMount() {
let ref = Firebase.database().ref('articles').orderByChild('insertDate').limitToLast(10);
this.bindAsArray(ref, 'articles'); // bind retrieved data to this.state.articles
}
render() {
return (
{
this.state.articles.reverse().map(function(article) {
return {article.title}
})
}
);
}
}
Вы можете комбинировать это с помощью одной анимации и одного элемента.
Вот идея:
.box {
height:250px;
width:50px;
background:
/*Gradient that we will animate*/
linear-gradient(to bottom,
red 0px,red 30px,
transparent 30px,transparent 50px,
rgba(255,0,0,0.5) 50px, rgba(255,0,0,0.5) 80px,
transparent 80px,transparent 100px,
rgba(255,0,0,0.2) 100px, rgba(255,0,0,0.2) 0)
0 0/100% 130px no-repeat,
/*Bottom gradient*/
repeating-linear-gradient(to bottom,
rgba(255,0,0,0.3) 0px,rgba(255,0,0,0.3) 30px,
transparent 30px,transparent 50px);
animation:change 1s infinite steps(10);
}
@keyframes change {
from {
background-position:0 250px,0 0
}
to {
background-position:0 -250px,0 0;
}
}
<div class="box">
</div>