垂直对齐到translateey(-50%)?-VerticallyalignwithtranslateY(-50%)givingajerk?

作者：Just忽略我_559 | 来源：互联网 | 2023-05-18 11:20

HowCanIfixthebelowcode..Ihaveusedthetechniqueoftransform:translateY(-50%)tomakeadiv

How Can I fix the below code.. I have used the technique of transform:translateY(-50%) to make a div vertically center. But When I use it with animation , it first takes top:50% then it translates giving a jerk.. I don't want the jerk to happen and the element should automatically come in center.

我怎样才能修改下面的代码。我使用了转换技术:translateY(-50%)来创建一个div垂直中心。但当我在动画中使用它时，它首先会占据顶部:50%然后它会翻译为“给一个混蛋”。我不希望这种情况发生，元素应该自动进入中心。

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}


  Vertical Align is Awesome!
  
 But with animation its giving a jerk!
 Please Fix

2 个解决方案

#1

Your animation rule overwrites the translateY(-50%) with scale(), and when the animation is done, the previous rule gets applied again, hence it jumps.

您的动画规则使用scale()覆盖translateY(-50%)，当动画完成时，前面的规则再次被应用，因此它会跳转。

If you add translateY(-50%) to the animation, it will work fine.

如果向动画中添加translateY(-50%)，它就可以正常工作。

A side note, based on whether one put the translateY() before or after the scale(), it animates differently, as transform values gets applied from right to left

另外，根据是否将translateY()放在scale()之前或之后，它的动画效果是不同的，因为转换值是从右到左应用

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: translateY(-50%) scale(0);
  }
  to {
    -webkit-transform: translateY(-50%) scale(1);
  }
}

@keyframes zoom {
  from {
    transform: translateY(-50%) scale(0); 
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}


  Vertical Align is Awesome!
  
 But with animation its giving a jerk!
 Please Fix

#2

The problem here ist the line-height, but you can actually use calc to fix that.

这里的问题是行高，但实际上你可以用calc来解决这个问题。

transform: translateY(calc(- 50% + 1.8em));

转换:translateY(calc(- 50% + 1.8em));

body,
html {
  height: 100%;
  background: #c9edff;
  text-align: center;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(calc(- 50% + 1.8em));
  font-family: arial;
  font-size: 20px;
  line-height: 1.8em;
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}


  Vertical Align is Awesome!
  
 But with animation its giving a jerk!
 Please Fix

推荐阅读

ip
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
ip
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
perl
简单的ajax与struts2实例

前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]

蜡笔小新 2023-10-16 17:08:23
ip
javascript入门·表单与表单元素总结（表单验证）

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]

蜡笔小新 2023-10-15 18:44:55
ip
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
ip
Javascript中带有加号 - 减号（±）的极坐标曲线方程 - Polar curve equation with plus-minus sign (±) in Javascript

IamtryingtodrawpolarcurvesonHTMLcanvasusingJavascript.WhatshouldIdowhenIwanttoco ... [详细]

蜡笔小新 2023-12-11 18:14:13
default
如何在输入字段中使用默认值的方法及代码

本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时，使用50作为默认值；当输入字段填充有-20或更多（负数）时，使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码，用于动态地根据条件使用默认值。 ... [详细]

蜡笔小新 2023-12-10 12:35:46
ip
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
default
Google Contacts API未返回输出 - Google Contacts API not returning output

Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]

蜡笔小新 2023-10-15 16:40:16
ip
【机器学习手册】日期和时区操作的重要性及应用

本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景，描述了学童们面对老先生的教导时的反应，以及上官如在这个过程中的表现。同时，文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后，文章强调了日期和时区操作在机器学习中的重要性，并指出了其在实际应用中的作用和意义。 ... [详细]

蜡笔小新 2023-12-12 17:40:14
ip
HDU 5842 Lweb and String （水题）

LwebandStringTimeLimit:20001000MS(JavaOthers)MemoryLimit:6553665536K(JavaO ... [详细]

蜡笔小新 2023-10-17 16:44:07
default
css 回到顶部按钮

本文由编程笔记#小编为大家整理，主要介绍了css回到顶部按钮相关的知识，希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-10-17 13:38:49
ip
创建ipadWEB应用程序到主屏幕

1.webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用(1) ... [详细]

蜡笔小新 2023-10-17 11:02:41
ip
JavaScript - let和var区别

前提ES5只有函数作用域和全局作用域，var属于ES5。let属于ES6，新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks ... [详细]

蜡笔小新 2023-10-13 18:33:54
header
使用粘性页眉和页脚切换侧栏 - Toggle Sidebar with sticky header and footer

Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]

蜡笔小新 2023-10-13 12:28:22

Just忽略我_559

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章