50projects50days知识点-19-button-ripple-effect

获取鼠标在盒子内的坐标
animation的相关内容

示例网址：

https://50projects50days.com/projects/button-ripple-effect/

http://50projects.tc.cluski.top/50projects50days/button-ripple-effect/

效果：

思路：

排版布局没有什么好说的，都是常规操作。

主要是在点击按钮之后，在点击的地方创建了一个新的元素，此元素会加上animation动画，让他放大。然后在setTimeout，在一定时间之后自动删除掉此元素。

获取鼠标在盒子内的坐标

button.addEventListener('click', function (e) {
    const x = e.pageX
    const y = e.pageY

    const buttonTop = e.target.offsetTop
    const buttonLeft = e.target.offsetLeft

    const xInside = x - buttonLeft
    const yInside = y - buttonTop
}

pageX：可视区域内的X坐标
pageY：可视区域内的Y坐标
offsetTop：距父盒子顶部内边距的距离
offsetLeft：距父盒子左部内边距的距离

以上的属性都是只读属性

相关内容可以看之前的笔记 [[…/2022黑马/3-JavaScript/2-WebAPIS/JS WebAPIs-4 PC 端网页特效]] 的 1.2 offset 与 style 区别

animation的相关内容

在此例子中使用了animation相关样式：

button .circle {
  animation: scale 0.5s ease-out;
}

@keyframes scale {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

animation-delay

定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为 -1s，动画会从它的动画序列的第 1 秒位置处立即开始。

animation-direction

指示动画是否反向播放，它通常在简写属性animation中设定

normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate：动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为 ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse：反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse：反向交替，反向开始交替。动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从 1 开始。

animation-duration

指定一个动画周期的时长吗，默认值为 0s，表示无动画。

animation-fill-mode

设置 CSS 动画在执行之前和之后如何将样式应用于其目标。

none：当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。

forwards：目标将保留由执行期间遇到的最后一个关键帧 (en-US)计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：

`animation-direction`	`animation-iteration-count`	last keyframe encountered
`normal`	even or odd	`100%` or `to`
`reverse`	even or odd	`0%` or `from`
`alternate`	even	`0%` or `from`
`alternate`	odd	`100%` or `to`
`alternate-reverse`	even	`100%` or `to`
`alternate-reverse`	odd	`0%` or `from`

backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。第一个关键帧取决于animation-direction的值：

animation-direction first relevant keyframe

normal or alternate 0% or from

reverse or alternate-reverse 100% or to
both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

`animation-direction`	first relevant keyframe
`normal` or `alternate`	`0%` or `from`
`reverse` or `alternate-reverse`	`100%` or `to`

animation-iteration-count

定义动画在结束前运行的次数可以是 1 次无限循环。

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值

animation-name

指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

animation-play-state

定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

animation-timing-function

定义 CSS 动画在每一动画周期中执行的节奏。

对于关键帧动画来说，timing function 作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

定义于一个关键帧区块的缓动函数 (animation timing function) 应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

animation

animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;

/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;