JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="word"></div>

CSS

@layer animation {
  :root {
    --easing: cubic-bezier(0.31, 1.28, 0.32, 1.275);
    --timing: 1s;
  }

  @keyframes slideOutUp {
    100% {
      opacity: 0;
      translate: 0 -100% 0;
    }
  }

  @keyframes slideInUp {
    0% {
      opacity: 0;
      translate: 0 100% 0;
    }
  }

  .word {
    view-transition-name: word-swap;
  }

  ::view-transition-new(word-swap),
  ::view-transition-old(word-swap) {
    animation-timing-function: var(--easing);
    animation-duration: var(--timing);
  }

  /* Leaving */
  ::view-transition-old(word-swap) {
    animation-name: slideOutUp;
  }

  /* Entering */
  ::view-transition-new(word-swap) {
    animation-name: slideInUp;
  }
}

@layer base {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #fff;
    color: #000;
    font-family: Arial, sans-serif;
  }

  .word {
    font-size: clamp(32px, 8vw, 64px);
    font-weight: bold;
    margin: 0 20px;
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

JavaScript

const words = [
  "沙发垫秋冬款防滑",
  "金丝绒加厚打底衫女",
  "床边晚上放衣服神器",
  "2023新款鸳鸯火锅",
]

let counter = 1

let interal = setInterval(() => {
  if (counter >= words.length) {
    counter = 0
  }

  const nextWord = words[counter]

  viewTransition(() => {
    document.querySelector(".word").innerText = nextWord
  })

  counter++
}, 1500)

function viewTransition(fn, params) {
  if (document.startViewTransition) {
    document.startViewTransition(() => fn(params))
  } else {
    fn(params)
  }
}