CSS 从下到上制作动画

Question

我想通过将内容放置在底部来隐藏内容：100% 在父级中；

然后单击我希望它向下滑动到顶部：0；

目前此片段不起作用（至少没有动画）。

我不想将内容定位到顶部：-100％，因为我希望动画立即开始，而不是等待内容移动到整个父级高度（这就是为什么我放置底部：100％）。

var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {


  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }

})

.wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  position: absolute;
  bottom: 100%;
  transition: all 0.5s;
}

.opened {
  bottom: auto;
  top: 0;
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}

<div class="wrap">

  <div class="content">

    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.

  </div>
</div>


<a href="#" id="toggle">toggle</a>

Answer 1

不要使用

position

，使用

transform

或

translate

。

var content = document.querySelector('.content')

document.querySelector('#toggle').addEventListener('click', function() {


  if (content.classList.contains('opened')) {
    content.classList.remove('opened')
  } else {
    content.classList.add('opened')
  }

})

.wrap {
  position: relative;
  width: 300px;
  height: 500px;
  background: #ddd;
  overflow: hidden;
}

.content {
  transition: translate 0.5s;
  translate: 0 -100%;
}

.opened {
  translate: 0 0;
}

#toggle {
  position: absolute;
  top: 0;
  left: 340px;
}

<div class="wrap">

  <div class="content">

    Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem. Curabitur dignissim nunc id arcu. Nulla facilisi.

  </div>
</div>


<a href="#" id="toggle">toggle</a>