CSS翻译到浏览器窗口的左上角

Question

我正在尝试创建一个带div的动画，并将其转换为浏览器窗口的左上角。可以这样做吗？

我有一段垂直导航链接，如下所示，当点击Expand链接时，我目前将open类添加到带有add-open-class的div。从那里我想让div滑到屏幕的左上角。

＆＃13;

＆＃13;

let generes = document.querySelector('.expand')
generes.addEventListener('click', e => {
  let accordion = generes.closest('.add-open-class')
  accordion.classList.toggle('open')
})

＆＃13;

a {
  display: block;
  padding: 10px;
  background: #fff;
}

.open {
  animation: openAnimation .2s both ease-in;
}

@keyframes openAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

＆＃13;

<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<a href="#">Nav Item</a>
<div class="add-open-class">
  <a href="#" class="expand">Expand</a>
  <div class="accordion">
    <a href="#">Sub Nav Item</a>
    <a href="#">Sub Nav Item</a>
    <a href="#">Sub Nav Item</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为什么不能这样：

.open {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: orange;
    animation: openAnimation 2s both ease-in;
}

@keyframes openAnimation {
  0% {
    transform: translate(calc(100vw - 50px), calc(100vh - 50px));
  }

  100% {
      transform:translate(0%,0%);
  }
}

<div class="open"></div>

更新：仅在内部包装

中进行动画（转换/翻译）

.wrap {
    position: relative;
    left: 100px;
    top: 40px;
    border: solid 2px green;
    width: 300px;
    height: 150px;
}

.open {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: orange;
    animation: openAnimation 2s both ease-in;
}

@keyframes openAnimation {
  0% {
    transform: translate(calc(300px - 20px), calc(150px - 20px));
  }

  100% {
      transform:translate(0, 0);
  }
}

<div class="wrap">
    <div class="open"></div>
</div>

使用您的代码：

let generes = document.querySelector('.expand')
generes.addEventListener('click', e => {
  let accordion = generes.closest('.add-open-class')
  accordion.classList.toggle('open')
})

.wrap {
    position: relative;
    border: solid 2px green;
}

.add-open-class {
    position: relative;
    border: solid 2px orange;
}

.add-open-class.open {
    position: absolute;
    top: 0;
    border: solid 2px fuchsia;
}

a {
  display: block;
  padding: 10px;
  background: #fff;
}

.open {
  animation: openAnimation .2s both ease-in;
}

@keyframes openAnimation {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

<div class="wrap">
    <a href="#">Nav Item</a>
    <a href="#">Nav Item</a>
    <a href="#">Nav Item</a>
    <a href="#">Nav Item</a>
    <a href="#">Nav Item</a>
    <a href="#">Nav Item</a>
    <div class="add-open-class">
      <a href="#" class="expand">Expand</a>
      <div class="accordion">
        <a href="#">Sub Nav Item</a>
        <a href="#">Sub Nav Item</a>
        <a href="#">Sub Nav Item</a>
      </div>
    </div>
</div>

Answer 2

看看这个逻辑对你有帮助吗。

＆＃13;

＆＃13;

$('button').click(function(e){
  $('.box-2').css({
  	position: 'fixed',
    top	: $('.box-2').offset().top,
    left: $('.box-2').offset().left
  });
  $('.box-2').animate({top:0,left:0},2000);
});

＆＃13;

.box-1{
  height: 100px;
  background: #ccc;
}
.box-2{
  width: 100px;
  height: 100px;
  background: #090;
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-1"></div>
<div class="box-2"></div>
<button>Go!</button>

＆＃13;

＆＃13;

＆＃13;