CSS3-Übergang zur Implementierung eines Benachrichtigungsnachrichtenkarussells

<Vorlage>
  <!-- Karussellansicht-->
  <div id="Karussell-Ansicht">
    <!-- Karussellliste-->
    <ul id="Karussell-Listenansicht" :class="{ 'Karussell-animiert':isAnimated }">
      <li v-for="(Element, Index) in Datenquelle" :key="index">{{ Element }}</li>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      //Animation starten isAnimated: false,
      // Karusselldaten dataSource: ['dzm', 'xyq', '啊啊']
    }
  },
  erstellt () {
    //Starte den Timer setInterval(this.scroll, 1000)
  },
  Methoden: {
    // Scroll-Animation scroll () {
      // Animation starten this.isAnimated = true
      // Countdown-Animationszeit setTimeout(() => {
        // Füge das erste Element des Arrays am Ende des Arrays hinzu this.dataSource.push(this.dataSource[0])
        // Entfernen Sie das erste Element des Arrays this.dataSource.shift()
        // Animation ausschalten this.isAnimated = false
        // Die Animationszeit muss mit der in .carousel-animated festgelegten Zeit übereinstimmen}, 500)
    }
  }
}
</Skript>

<Stilbereich>
#Karussell-Ansicht {
  Breite: 100 %;
  Höhe: 32px;
  Hintergrundfarbe: rot;
  Überlauf: versteckt;
}
#Karussell-Listenansicht {
  Rand: 0;
  Polsterung: 0;
  Listenstil: keiner;
}
#Karussell-Listenansicht li {
  Zeilenhöhe: 32px;
  Höhe: 32px;
}
.Karussell-animiert {
  Übergang: Transformation 0,5 s;
  transformieren: übersetzenY(-32px);
}
</Stil>