如何用CSS Transitions和Transforms实现Windows 10磁贴切换动画？

Got it, let's build that smooth tile transition you're looking for! I'll walk you through a clean implementation using CSS transitions (for the smooth slide) and a touch of JavaScript to trigger the switch after 10 seconds—perfect for your existing DOM structure.

Step 1: Your Existing DOM Structure #

First, let's confirm the HTML you're working with (I'll keep it exactly as you provided):

<div class="wrapper">
  <div class="block-1">
    <p>some text</p>
  </div>
  <div class="block-2">
    <p>some other text</p>
  </div>
</div>

Step 2: CSS for Layout & Animation Base #

We need to set up the container and blocks so the slide works correctly. Here's the CSS:

.wrapper {
  /* Make this the positioning context for the blocks */
  position: relative;
  /* Prevent the sliding block from spilling outside */
  overflow: hidden;
  /* Set your desired tile size—adjust as needed */
  width: 200px;
  height: 200px;
  border: 1px solid #ccc; /* Optional: just to see the tile boundary */
}

.block-1, .block-2 {
  /* Both blocks fill the entire wrapper */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Center text nicely (optional but polished) */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
}

.block-1 {
  /* Initial state: visible and covering the wrapper */
  background-color: #4CAF50; /* Example color */
  z-index: 1;
}

.block-2 {
  /* Initial state: hidden below the wrapper */
  background-color: #2196F3; /* Example color */
  transform: translateY(100%);
  z-index: 2; /* Ensure it slides over block-1 */
  /* Add smooth transition for the slide effect */
  transition: transform 0.5s ease-in-out;
}

/* Class to trigger the slide-in animation */
.wrapper.slide-in .block-2 {
  transform: translateY(0);
}

Step 3: JavaScript to Trigger the Transition #

We'll use a simple setTimeout to add the trigger class after 10 seconds:

// Wait 10 seconds, then add the slide-in class to the wrapper
setTimeout(() => {
  document.querySelector('.wrapper').classList.add('slide-in');
}, 10000);

How It Works #

• Layout Setup: The wrapper uses position: relative so the absolutely positioned blocks are contained within it. overflow: hidden makes sure block-2 stays hidden until it slides in.
• Initial States: block-1 starts visible and fills the wrapper. block-2 is shifted down 100% of the wrapper's height (using transform: translateY(100%)) so it's completely out of view.
• Animation Trigger: After 10 seconds, JavaScript adds the slide-in class to the wrapper, which shifts block-2 up to translateY(0)—creating that smooth slide-up effect that covers block-1.
• Smoothness: The transition property on block-2 ensures the slide happens gradually over 0.5 seconds (you can adjust the duration by changing 0.5s to something like 0.3s for a faster slide).

Optional: Repeat the Animation #

If you want the tiles to switch back and forth automatically, you can extend the JavaScript to toggle the class:

const wrapper = document.querySelector('.wrapper');
setInterval(() => {
  wrapper.classList.toggle('slide-in');
}, 10000);

内容的提问来源于stack exchange，提问作者mvk