u-tabs 切换内容动画

要实现 u-tabs 切换内容动画，可以使用 CSS3 的 transition 和 transform 属性来实现。

首先，在 u-tabs 的每个选项卡中添加一个内容容器，并将其隐藏：

<u-tabs>
  <u-tab>选项卡1</u-tab>
  <u-tab>选项卡2</u-tab>
  <u-tab>选项卡3</u-tab>
  <u-tab-panels>
    <u-tab-panel>内容1</u-tab-panel>
    <u-tab-panel>内容2</u-tab-panel>
    <u-tab-panel>内容3</u-tab-panel>
  </u-tab-panels>
</u-tabs>

<style>
  u-tab-panel {
    display: none;
  }
</style>

然后，使用 CSS3 的 transition 和 transform 属性来添加动画效果。在 u-tabs 的选项卡被选中时，通过设置内容容器的位置来显示对应的内容，并设置 transition 属性来实现平滑的过渡效果。

<style>
  u-tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
  }

  u-tab-panel.active {
    display: block;
    transform: translateX(0);
  }

  u-tab-panel.inactive-left {
    transform: translateX(-100%);
  }

  u-tab-panel.inactive-right {
    transform: translateX(100%);
  }
</style>

<script>
  const tabPanels = document.querySelectorAll('u-tab-panel');
  const tabs = document.querySelectorAll('u-tab');

  for (let i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function() {
      // 隐藏所有内容
      for (let j = 0; j < tabPanels.length; j++) {
        tabPanels[j].classList.remove('active');
        tabPanels[j].classList.add('inactive-left');
      }

      // 显示对应的内容
      const tabPanel = this.nextElementSibling;
      tabPanel.classList.remove('inactive-left');
      tabPanel.classList.add('active');

      // 如果选项卡在左侧，将内容从右侧滑入
      if (i < tabs.length / 2) {
        tabPanel.classList.remove('inactive-right');
      } else {
        tabPanel.classList.add('inactive-right');
      }
    });
  }
</script>

这样，当用户在 u-tabs 中切换选项卡时，内容容器就会显示出来，并带有平滑的动画效果。