代码之家 › 专栏 › 技术社区 › Toniq

css从上到中心设置动画

animation css html javascript

Toniq · 技术社区 · 1 年前

这是我的设置。我希望内容隐藏在顶部的正上方,然后按需将其动画化到中心。显然,使用以下css打开的类,这个动画并没有达到所需的效果(但添加打开的类时内容是居中的)。

我可以用css实现这一点吗?或者我需要javascript?

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: 300px;
  background: #ddd;
  overflow: hidden;
}

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

.opened {
 transform: translateY(-50%);
 bottom:auto;
 top:50%;
}

#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>

2 回复 | 直到 1 年前

Paulie_D 1 年前

无法设置动画/过渡到 auto 。它必须有开始和结束数字价值

红线用于演示,仅显示父对象的中心。

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: 300px;
  background: #ddd;
  overflow: hidden;
}

.wrap:after {
  content: "";
  width: 100%;
  background: red;
  position: absolute;
  top: 50%;
  height: 1px;
}

.content {
  position: absolute;
  bottom: 100%;
  transform: translatey(0%);
  transition: all 0.5s;
}

.opened {
  bottom: 50%;
  transform: translatey(50%);
}

#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>

A Haworth 1 年前

这个片段开始时内容的底部位于包装的顶部,然后在打开时将底部移动到中心,并将其向下转换50%(高度),使其垂直居中。

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: 300px;
  background: #ddd;
  overflow: hidden;
}

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

.opened {
  transform: translateY(-50%);
  bottom: auto;
  bottom: 50%;
  transform: translateY(50%);
}

#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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

7 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

7 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前