共享元素动画

共享元素动画是一种流行的移动应用程序（如Android和iOS）中使用的动画效果，它可以增强用户体验并提高应用程序的可用性。该动画特别适用于在多个屏幕之间导航时，例如从列表项到详细信息页面，以及从一个视图到另一个视图。

共享元素动画通常涉及将两个屏幕上的元素关联起来，并在屏幕之间无缝转换。这些元素通常是相同的，或者具有相似的外观和感觉，例如列表项和详细信息页面上的图像、标题或其他元素。

通过使用共享元素动画，用户可以更容易地了解他们从哪里来，以及他们正在到达哪里。这种连续性有助于创建一个更流畅的用户体验，使应用程序感觉更加统一和一致。

效果

安装

你可以使用npm或yarn来安装vue-share-element：

npm install vue-share-element
# 或者
yarn add vue-share-element

界面A元素共享到界面B元素

• A页面 (pageA)

  <template>
    <VueShareElementVue>
      <button @click="$router.push('/user')">pageA</button>
    </VueShareElementVue>
  </template>
  <script lang="ts" setup>
  import VueShareElementVue from "vue-share-element/VueShareElement.vue";
  </script>
  

• B页面 (pageB)

  <template>
    <VueShareElementVue>
      <button @click="$router.go(-1)">pageB</button>
    </VueShareElementVue>
  </template>
  <script lang="ts" setup>
  import VueShareElementVue from "vue-share-element/VueShareElement.vue";
  </script>
  <style scoped>
  /* 为了显示动画效果 */
  button {
    position: absolute;
    bottom: 10px;
  }
  </style>
  

注意：

1. 一对一代表：push界面只包含一个子元素
2. 接收界面的元素无论什么情况下，只能含一个

界面A列表元素 共享到界面B元素

• A页面 (pageA)

  <template>
  <VueShareElementVue @click="toPage" class="list" ref="shareElementRef">
      <img v-for="item in list" :key="item" :share="item" :data-src="item" :src="item" />
      </VueShareElementVue>
  </template>
  <script lang="ts" setup>
      import { onMounted, ref } from "vue";
      import { useRouter } from "vue-router";
      import VueShareElementVue from "vue-share-element/VueShareElement.vue";
      const router = useRouter();
      const shareElementRef = ref<InstanceType<typeof VueShareElementVue>>();
      const list = [
          "https:xxxx",
          "https:xxxx",
          "https:xxxx",
          "https:xxxx",
          "https:xxxx",
      ];
      onMounted(() => {
          // 动画结束钩子
          shareElementRef.value?.setHooks(() => {
              console.log("结束");
          });
      });
      /*
          为了更好记录共享元素，多对一情况下需要父容器代理事件
          通过 子元素 data- 传递数据
      */
      function toPage(params: DOMStringMap) {
            if (params.src) 
              router.push({ path: "/pageB", query: { img: encodeURIComponent(params.src) } });
      }
  </script>
  <style scoped>
      .list {
          display: flex;
      }
      .list img {
          width: 100px;
          height: 50px;
          margin: 12px;
          cursor: pointer;
      }
  </style>
  

• B页面 (pageB)

  <template>
    <div class="page-b">
      <VueShareElementVue>
        <img :src="src" @click="$router.go(-1)" />
      </VueShareElementVue>
      <span>图片信息</span>
    </div>
  </template>
  <script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import { useRoute } from "vue-router";
  import VueShareElementVue from "vue-share-element/VueShareElement.vue";
  let src = ref("");
  const route = useRoute();
  onMounted(() => {
    let url = route.query.img as string;
    src.value = decodeURIComponent(url);
  });
  </script>
  <style scoped>
  .page-b {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .page-b img {
    width: 300px;
    height: 200px;
  }
  </style>
  

注意：

1. 接收界面是异步渲染的情况下，需要提前定型(提前设置好元素宽高)
2. 注意 share 是唯一的，相当于v-key，进行记录触发共享元素key
3. *如果在数据多出现滚动条情况下,滚动条一定在父容器上，如果是body或更上级挤出来的滚动条，位置会计算问题 (解决:限制VueShareElementVue的宽高，让滚动条在VueShareElementVue上，VueShareElementVue会自动计算位置)。

{
    width: 100px;
    height: 300px;
    overflow: auto;
}

props属性

• delay：设置动画延迟时间(默认:0.62秒)
• zIndex: 设置动画层级(默认:2001)

emit函数

• setHooks(end:Function):添加生命周期

注意

如果进入新界面有loading动画，可能需要处理显示优先级逻辑，或者固定共享元素的高宽位置等方式。

npm传送