HTML / CSS - 如何让标签内的表单动画？ [英] HTML/CSS - How to get label inside form to animate?

问题描述

我正在看Code School的教程，并且有一个关于通过缩放和改变位置来设置动画元素的教程。

该视频将动画中的标签形成。当您专注于输入字段时，标签（位于输入字段内）将移出输入字段，并缩小尺寸。

我正在尝试复制 - 没有运气。

我做错了什么？

https://jsfiddle.net/8tvh4x45/1/

编辑：只需要为transform属性添加该属性，如果我只有一个动画（scale或translateY），我就可以获得动画的标签 - 但我无法同时使用这两个动画。

 < fieldset class =form-field> 
< input class =form-inputtype =textid =name> 
< label class =form-labelfor =name>名字< / label> 
< / fieldset> 
 
 .form-field {
 border：0; 
} 
 
 .form-input {
 position：absolute; 
} 
 
 .form-input + .form-label {
 position：relative; 
转换：转换1s; 
} 
 
 .form-input：focus + .form-label {
 transform：scale（0.8），translateY（50px）; 
 
  

解决方案

c $ c> transform 属性无效。在转换多个值时，它们应该用空格分隔（即不包含逗号）。 查看MDN 获取正式语法。

因此，您需要在 transform：scale（0.8），translateY（50px）。

$ b中删除逗号
$ b

更新示例

  .form-input + .form-label {
 position：relative; 
转换：转换1s; 
 display：inline-block; 
} 
 
 .form-input：focus + .form-label {
 transform：scale（0.8）translateY（50px）; 
} 
  

请注意，为了在浏览器中使用它，还需要将元素的显示更改为 inline-block ，以使其成为 transformable 。

<根据规范：

可变形元素是这些类别中的一个元素：

布局受管理的元素由块盒级或原子内嵌级元素（即 inline-block ）的CSS盒模型或其显示属性计算为 table-row ， table-row-group ， table-header-group ， table-footer-group ， table-cell 或 table-caption 。

I'm watching tutorials on Code School, and there is a tutorial on animating elements via scaling and changing positioning.

The video is on animating a label inside a form. When you focus on the input field, the label (which is inside the input field) moves out of the input field, and scales down in size.

I'm trying to replicate -- with no luck.

What am I doing wrong?

https://jsfiddle.net/8tvh4x45/1/

edit: just want to add that for the transform property, I can get the label to animate if I only have one animation (scale or translateY) -- but I can't get both to work together.

<fieldset class="form-field">
  <input class="form-input" type="text" id="name">
  <label class="form-label" for="name">First Name</label>
</fieldset>

.form-field {
  border: 0;
}

.form-input {
  position: absolute;  
}

.form-input + .form-label {
  position: relative;
  transition: transform 1s;
}

.form-input:focus + .form-label {
  transform: scale(0.8), translateY(50px);
}

解决方案

The syntax for the transform property is invalid. When transforming multiple values, they should be separated with spaces (i.e., no commas). See MDN for the formal syntax.

Therefore you need to remove the comma in transform: scale(0.8), translateY(50px).

Updated Example

.form-input + .form-label {
  position: relative;
  transition: transform 1s;
  display: inline-block;
}

.form-input:focus + .form-label {
  transform: scale(0.8) translateY(50px);
}

As a side note, in order for this to work across browsers, you may also need to change the display of the element to inline-block in order for it to be "transformable".

According to the spec:

A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element (i.e., inline-block), or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

这篇关于HTML / CSS - 如何让标签内的表单动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！