vue.js 如何将元素从相对位置转换为绝对位置？

wfveoks0 于 2023-01-17 发布在 Vue.js

关注(0)|答案(2)|浏览(210)

我在一个投资组合网站上工作，我有这个很酷的想法，登陆页面将在中间的名称，然后当我选择一个路线的页面将变成一个导航栏。
问题是，为了做到这一点，我要么必须绝对定位导航栏项目，这是我不想做的，要么我需要在屏幕中间的名称相对于其原始位置，这是不可取的。
This is how it looks now
我使用的是带有Tailwind的Vue，但是一个普通的HTML解决方案会有所帮助。
这是我的代码：

<template>
  <header
    class="bg-black/25 py-3 transition-[max-height] duration-1000 ease-in-out max-h-screen h-screen justify-center"
    :class="{
      'flex max-h-20': !isHomePage,
    }"
  >
    <div
      class="w-5/6 flex justify-between items-center"
      :class="{ 'h-screen': isHomePage }"
    >
      <router-link to="/" :class="{ 'flex space-x-2 items-end': !isHomePage }">
        <div
          class="text-3xl font-semibold transition-all absolute duration-1000 left-1/2 top-1/3 -translate-y-4"
          :class="{
            'relative !translate-y-0 !translate-x-0 left-0 top-0': !isHomePage,
          }"
        >
          Aby
        </div>
        <div
          class="text-2xl font-medium transition-all duration-1000 absolute left-1/2 top-1/3 translate-y-4 -translate-x-4"
          :class="{
            'relative !translate-y-0 !translate-x-0 left-0 top-0': !isHomePage,
          }"
        >
          Isakov
        </div>
      </router-link>
      <router-link to="/other">click</router-link>
    </div>
  </header>
</template>

我尝试绝对定位导航栏项目，但这导致了使组件响应的问题。

vue.js

来源：https://stackoverflow.com/questions/75129043/how-can-i-transition-an-element-between-a-relative-position-to-an-absolute-posit

2条答案

按热度按时间

pbwdgjma1#

你需要采取一些步骤来应用一个转换来改变css的'position'属性。下面是一个函数来改变一个相对位置的元素：

function positionTransition(element) {
    var rectBefore = element.getBoundingClientRect(); //get old coordinates
    
    //change positioning:
    element.style.position = "absolute";
    element.style.left = "50vw";
    element.style.top = "50vh";
    
    var rectAfter = element.getBoundingClientRect(); //get new coordinates
    
    //calculate the difference:
    var xDiff = -(rectAfter.x - rectBefore.x);
    var yDiff = -(rectAfter.y - rectBefore.y);
    
    //translate back, so that the absolute positioned element seems to be in the old place:
    element.style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
    
    //finally, make the transition, which works because it remains in position: absolute
    setTimeout(function() { //without the timeout, transition is ignored
        element.style.transition = "transform 1000ms ease-in-out";
        element.style.transform = "";
    }, 10);
}

我知道你在想什么，但是别担心。位置的变化和转换是瞬间的，没有 Flink ！

编辑1

我在下面的代码片段中构建了一个完整的示例：
x一个一个一个一个x一个一个二个一个x一个一个三个一个

赞(0）回复(0）举报 2023-01-17

ntjbwcob2#

不幸的是，根据文件，这暂时无法实现。

参考

1. w3文档

可设置动画：否

2. mozilla文档

动画类型：离散的

赞(0）回复(0）举报 2023-01-17

我来回答

vue.js 如何将元素从相对位置转换为绝对位置？

2条答案

参考

1. w3文档

2. mozilla文档

相关问题

热门标签

最新问答