50projects50days知识点-form-input-wave

示例网址：

https://50projects50days.com/projects/split-landing-page/

http://50projects.tc.cluski.top/50projects50days/split-landing-page/

效果：

思路：

点击数据框之后的上移操作由transform: translateY(-30px);来完成，而每次字母的顺序上移则是通过transition-delay来完成的。

cubic-bezier()

在CSS中设置动画可以由transition属性来指定，预设的动画由ease、ease-in、ease-out、ease-in-out等。在此例子中，字母上移的时候有一种移动过头又折返回来的效果，这是预设动画所没有的，所以需要使用cubic-bezier()函数来设置属于自己动画。

在此例子中，使用到的动画为cubic-bezier(0.68, -0.55, 0.265, 1.55)，对应的曲线大致为

可以在这个网站上自定义自己的动画曲线：Ceaser - CSS Easing Animation Tool - Matthew Lein (xuanfengge.com)

element.innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。

此例子中就是用了一下的js将单词拆成一个个有<span>标签包裹，并带有transition-delay样式的HTML元素。

const labels = document.querySelectorAll('.form-control label')

labels.forEach(label => {
    label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
        .join('')
})