代码之家 › 专栏 › 技术社区 › Tonald Drump

“跳转”到translatey值,然后动画返回0

css-transitions css3 css jquery javascript

Tonald Drump · 技术社区 · 7 年前

我需要一个元素来“跳”到 translateY 价值 没有过渡 然后马上 使有生气 返回 translateY: 0 .

不幸的是,以下操作不起作用(什么都没有发生,因为我想转换被“太快”删除)

$('div').css('transform', 'translateY(' + height + 'px)');
        .addClass('animate-transform')
        .removeAttr('style');

以下是可行的,但感觉很糟糕,我想知道是否有更优雅的解决方案。

$('div').click(function() {
  
  var height = 200; // This is not always 200

  $('div').css('transform', 'translateY(' + height + 'px)');
  
  setTimeout(function() {
    $('div').addClass('animate-transform')
            .removeAttr('style');
  }, 0)

  setTimeout(function() {
    $('div').removeClass('animate-transform');
  }, 1000)

})

div {
  height: 100px;
  background-color: red;
}

.animate-transform {
  transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

2 回复 | 直到 7 年前

Temani Afif 7 年前

您可以尝试使用CSS动画并依赖 animationend 移除类的事件。如果希望转换值是动态的,也可以使用CSS变量。

$('div').click(function() {
  $('div').css('--v', '200px');
  $('div').addClass('animate-transform').on('animationend', function() {
    $('div').removeClass('animate-transform')
  });
})

div.e {
  height: 100px;
  background-color: red;
  display: block;
}

.animate-transform {
  animation: change 1s;
}

@keyframes change {
  from {
    transform: translateY(var(--v));
  }
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="e"></div>

samuellawrentz 7 年前

您可以使用jquery的动画API,而不是使用CSS转换。只需将DIV的位置设置为 relative 并修改 top . 工程与预期类似。

var height = 150;
$('div').on('click', function(){
$('div').css('top', height).animate({'top': 0},800);
});

div {
      height: 100px;
      background-color: red;
  position:relative;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

参考jquery动画: https://api.jquery.com/animate/

推荐文章

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

5 月前

Mass · 如何在Tailwind CSS v4中创建配置

5 月前

magenta placenta · 将css变量合并为一个变量

5 月前

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

5 月前

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

5 月前

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

5 月前

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

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前