musicNote分析

@/components/musicNote

code

crateNode

开始我还在想,这为啥使用createElement创建了一个节点,之后只是给一个子节点并且只使用子节点,正当我想改一改代码变成直接使用创造出的节点的时候,我悟了~
我们想要获得的是div.icon-wrapper,这样可以比较方便的设置初始的类名以及内容,返回的节点是如下结构

<div class="icon-wrapper">
  <div class="iconfont">&#xe642;</div>
</div>

初始化

初始化使用useEffect
首先生成三个上述node,并且添加监听器,在监听到变化结束时,将node隐藏,并且将transform恢复初始值.

startAnimation

startAnimation经过测试后,是距离页面左上角的x,y,又因为div.img-wrapper是position:fixed且是inline-block,是页面绝对位置,所以可以决定音符的位置.

1. 首先设置inline-block,使元素可见(原来是none)
2. 使用setTimeout更新transform属性,不使用定时器似乎不会触发transition,且监听不到transitionend事件(!todo)
3. 使用两个容器的transform属性,一个左右移动,一个上下移动,但是两者的速度变化不同,形成了抛物线.
4. 监听transitionend事件,当结束时,将原先的css属性值还原到初始值

demo
可以看到我的demo中,transitionend触发了两次,box,icon都触发这个事件.

css-animation

参考link trainsition和transform都是css3属性,一直没搞懂transition是干啥的..

transition是过度,指某个css属性值如何进行平滑的变化. transform是改变所在元素的外观,translate是transform中的位移函数

translate

基本用法如下

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

如高度延迟 1s 后以ease曲线进行过度,持续 2s,延迟 1s

transition: height 2s ease 1s;

监听所有属性如下

transition: all 2s ease 1s;

所有属性是指能够进行动画过渡的属性,有一些属性不能进行过度,如display

所以可以根据:hover等引起属性值变化

.box {
  width: 10px;
  transition: width 0.4s ease;
}

.box:hover {
  width: 50px;
}

code

transform

如下

transform: [转换函数];

函数	作用	介绍
translate(x,y)	位移	元素 x 轴 y 轴位移,可为负数
scale(x,y)	缩放	类似上行
rotate(angle)	旋转	单位deg,顺时针

基本的转换函数如上,还有其他函数,如translate3d(x,y,z)

transition + transform

transition可以指定transform属性.如下

transition: transform 2s ease 1s;

transform 对文档流的影响

使用transition监听基本属性,如height,width等,发生改变后,会对文档流产生影响 如demo中,每一个box长度变化会把自身右边的 box 挤开.可以看出,在发生变化时元素固定的点不是中心点,而是左上角.

code

使用transition监听transform属性则不会,因为transform只会影响当前元素的状态,达到类似于position:relative;的效果,因为transform默认基于元素中心进行转换,也可以使用transform-origin修改操作的基点,但是依旧不会影响其他元素.

code

.box {
  width: 100px;
  height: 100px;
  transition: all 0.4s ease;
}

.box:hover {
  transform: scale(1.2, 1.2);
}