SVG-анимация с задержкой

Я использую 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}
}) }
); } }

1
задан Roland Jegorov 13 July 2018 в 13:53
поделиться

2 ответа

0
ответ дан Roland Jegorov 17 August 2018 в 12:42
поделиться

Вы можете комбинировать это с помощью одной анимации и одного элемента.

Вот идея:

.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>

0
ответ дан Temani Afif 17 August 2018 в 12:42
поделиться
  • 1
    Ты имел в виду маску? – Roland Jegorov 13 July 2018 в 14:18
  • 2
    О'кей, я вижу, ты не имел в виду маску. Вы имели в виду запуск в то же время всех анимаций, но использование разных градиентов ?. – Roland Jegorov 13 July 2018 в 14:26
  • 3
    @RolandJegorov Да, я имел в виду совершенно другой способ создания анимации;) ... основная идея состоит в том, чтобы иметь только один, тогда есть много способов сделать. здесь я использовал градиент, но это может быть что-то еще – Temani Afif 13 July 2018 в 14:27
  • 4
    Но у меня есть 6 элементов. Они представляют собой пути svg в фактическом коде. Я не совсем понимаю одноэлементную идею – Roland Jegorov 13 July 2018 в 14:29
  • 5
    @RolandJegorov вы избавитесь от них :) ... Моя идея - полностью изменить код на что-то еще. Как вы можете видеть, мой код создает тот же визуальный результат, что и gif, который вы добавили. Таким образом, в конце мы имели тот же результат разными способами. и моя идея полагается только на одну анимацию, поэтому у вас нет проблемы с задержкой при запуске многих анимаций – Temani Afif 13 July 2018 в 14:31
Другие вопросы по тегам:

Похожие вопросы: