个人中心
gpt4 book ai didi

View Transitions API: animating underneath element(视图过渡API：在元素下方设置动画)

转载 作者：bug小助手 更新时间：2023-10-25 12:18:33 25 4
gpt4 key购买 nike



I am using the View Transitions API to make an element grow in size and be in the center of the screen.

我正在使用视图过渡API来使元素变大并位于屏幕的中心。


During the animation the element is covered by the element next to it. This happens only when the element next to it has a view-transitions-name: <some-name> applied to it. I believe this happens because a new stacking order is created when a unique name is given to the element.

在动画过程中，该元素被其旁边的元素覆盖。这仅在其旁边的元素应用了view-startions-name： 时才会发生。我相信这是因为当元素被赋予唯一的名称时，会创建新的堆叠顺序。


Is there a way that I can have the currently animating element on top over everything else?

有没有一种方法可以让我把当前动画元素放在最上面？


Here is a script that demonstrates this issue. Note at the time of writing this only works in chromium browser.

以下是演示此问题的脚本。注意：在撰写本文时，这只能在Chrome浏览器中使用。




<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Overlapping elements</title>
</head>

<body>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      display: grid;
      grid-template-columns: 10vw 10vw;
      gap: 1em;
    }
    
    div {
      view-transition-name: div;
      grid-column: 1;
      width: 10vw;
      height: 10vh;
      background-color: hotpink;
    }
    
    article {
      /* This view-transitions-name causes the pink box to go underneath the
           green box */
      view-transition-name: article;
      grid-column: 2;
      width: 10vw;
      height: 10vh;
      background-color: forestgreen;
    }
    
    .grow {
      view-transition-name: div;
      position: fixed;
      left: 25vw;
      top: 25vh;
      width: 50vw;
      height: 50vh;
      background-color: hotpink;
    }
  </style>
  <div></div>
  <article></article>
  <button>click me</button>
  <script>
    document.querySelector("button").addEventListener("click", () => {
      document.startViewTransition(() => {
        const element = document.createElement("section");
        element.classList.add("grow");
        document.body.appendChild(element);
        document.querySelector("div").remove();
      });
    });
  </script>
</body>

</html>




更多回答
优秀答案推荐

By adding the transitions name at runtime this issue can be tackled. So every time, at runtime, you have to determine what element is ready to be animated and at the corresponding transition name.

通过在运行时添加转换名称，可以解决此问题。因此，每次在运行时，您都必须确定哪个元素已准备好在相应的过渡名称处设置动画。




document.querySelector("button").addEventListener("click", () => {
  // By adding the viewTransitionName like this 
  document.querySelector("div").viewTransitionName = "div";

  document.startViewTransition(() => {
    const element = document.createElement("section");
    element.classList.add("grow");
    document.body.appendChild(element);
    document.querySelector("div").remove();
  });
});

body {
  display: grid;
  grid-template-columns: 10vw 10vw;
  gap: 1em;
}

div {
  grid-column: 1;
  width: 10vw;
  height: 10vh;
  background-color: hotpink;
}

article {
  grid-column: 2;
  width: 10vw;
  height: 10vh;
  background-color: forestgreen;
}

.grow {
  view-transition-name: div;
  position: fixed;
  left: 25vw;
  top: 25vh;
  width: 50vw;
  height: 50vh;
  background-color: hotpink;
}

<div></div>
<article></article>
<button>click me</button>




更多回答

25 4 0
文章推荐： Abstract static javascript method workaround(抽象静态Java脚本方法变通方法)
文章推荐： How to Best do End to End TLS in AWS EKS(如何在AWS EKS中最好地执行端到端TLS)
文章推荐： What is best way to define a style for a Accordion?(定义手风琴风格的最佳方式是什么？)
文章推荐： How to check if a radio button has a value (has been checked at least one) on click of a button(如何在单击按钮时检查单选按钮是否有值(至少选中了一个))
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com