SveletJs学习——Transition动画

过渡动画

我们可以通过优雅的过渡动画效果进入和离开DOM来吸引客户，svelte通过transition指令让这个问题变得简单起来。

1. 淡入淡出

1.1 生硬显示隐藏

正常我们想要做一个元素的显示与隐藏，可以这样

	
		 // 开关控制元素是否隐藏
		visible {visible}
	
	{#if visible}
		
Fade In And Out 看看淡入淡出效果
	{/if}

1
2
3
4
5
6
7
8
9
10
11
12

但实现后我们发现，这个突然出现和突然消失的效果太过生硬了，因此我们可以设置一些动画，看起来更柔和舒服一些，所以我们可以将上述代码做如下更改

1.2 淡入淡出

..

import { fade } from 'svelte/transition' // 引入动画库中具体的动画效果
// 在使用的标签上面增加transition:[动画效果]
Fade In And Out 看看淡入淡出效果
1
2
3

1.3 接收参数

...

transition函数可以接受参数，我们可以切换一个可以接受参数的动画效果fly。这个fly效果就是在离开的时候，根据设置，向y轴方向移动并慢慢消失，出现时从离开的位置慢慢出现

import { fly } from 'svelte/transition'
{y: 100, duration: 2000}}>Fade In And Out 看看淡入淡出效果
1
2

1.4 出入动画 in:[动画效果] out:[动画效果]

刚刚我们上述没有区分进行设置，动画在in和out时是可以执行不同的动画效果的，我们可以指定其中的一个或者两个。

• transition:[动画效果] in和out都执行这个动画
• in:[动画效果] 在出现/进入时执行这个动画效果
• out:[动画效果] 在消失/离开时执行这个动画效果

import { fade, fly } from 'svelte/transition'

{y: 100, duration: 2000}} out:fade>Fade In And Out 看看淡入淡出效果
1
2
3

2. 自定义CSS过渡

我们可以像官方示例一样封装一个动画效果。在动画进入时绑定了一个spin的效果，由于spin是我们自定义的效果，所以我们需要定一个spin函数，接收两个参数，node当前DOM和options配置。之后在函数中对接收到的参数进行处理，就可以得到我们想要的动画效果啦

	
		
		visible
	
	{#if visible}
		

			transitions!
		
	{/if}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

• css函数：接收一个时间参数，返回的内容是动态的根据t来进行计算的内联样式
• hsl()函数：使用色相、饱和度、亮度来定义颜色，这样随着时间的变化，文字的内容就会各种颜色进行变换达到一个炫酷的效果
• ~~： 相当于Math.floor()

3. 自定义JS过渡

虽然通常我们应该尽可能多的使用CSS进行过渡，但是如果不借用JavaScript，有些效果是无法实现的。以下官网示例：逐字打印

	
		
		visible
	
	{#if visible}
		

			The quick brown fox jumps over the lazy dog
		
	{/if}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

4. 过渡事件

了解过渡的开始和结束会很有用，Svelte调度监听事件，像监听其他任何DOM事件一样

• on:introstart=fn 动画进入开始时执行该函数
• on:introend=fn 动画进入结束时执行该函数
• on:outrostart=fn 动画离开开始时执行该函数
• on:outroend=fn 动画离开结束时执行该函数

	
status: {status}
	
		visible
	
	{#if visible}
		
{ y: 188, duration: 2000}}
		 on:introstart="{() =>  status = 'intro start'}"
		 on:introend="{() => status = 'intro end'}"
		 on:outrostart="{() => status = 'outro start'}"
		 on:outroend="{() => status = 'outro end'}"
		>
			动画效果进出
		
	{/if}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5. 局部过渡

无论是添加或销毁任何标签容器，过渡动画都会在标签上进行播放。单个列表项的过渡效果影响到切换整个列表，以致切换可见性时也有过渡效果。如果我们只是想在列表项新增或删除时出现过渡效果，在显示和隐藏时不使用动画效果，可以通过局部(local)过渡来实现该功能。

	
		 展示列表
	
	
		
	
	{#if showItems}
		{#each items.slice(0, i) as item}
			

				{item}
			
		{/each}
	{/if}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

6. 延时过渡

svelte过渡引擎其中一项特别强大的功能就是可以设置延时过渡，以便多个效果之间协调。

• 引入函数，并定义动画函数import { quintOut } from 'svelte/easing'; import { crossfade } from 'svelte/transition' const [send, receive] = crossfade({...
• 在标签中绑定动画效果in:receive="{{key: todo.id}}" out:send="{{key: todo.id}}"

	

		 e.which === 13 && add(e.target)}>
		

			
待办项
			{#each todos.filter(t => !t.done) as todo (todo.id)}
				
					 mark(todo, true)}>
					{todo.description}
					remove
				
			{/each}
		
		

			
已办
			{#each todos.filter(t => t.done) as todo (todo.id)}
				
					 mark(todo, false)}>
					{todo.description}
					remove
				
			{/each}
		
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

7. 示例中新知识

7.1 左移运算符 <<

• 2 << 3
• 左边的2转成二进制 10
• 左移3位后变为 10000
• 转成十进制是16

7.2 user-select 是否能选取元素的文本

在web浏览器中，如果您在文本上双击或者鼠标左键滑动，文本会被选取或高亮显示。user-select属性用于阻止这种行为。

• user-select:none; CSS写法
• object.style.userSelect=“none”; JS写法
• user-select可选值：
  • auto: 默认。如果浏览器允许，则可以选择文本
  • none：防止文本可被用户选取
  • text：文本可被用户选取
  • all：单击选取文本，而不是双击

7.3 text-indent

首行文本缩进

7.4 Math.sqrt

返回一个数的平方根

• Math.sqrt(4) -> 2

7.5 css中hsl函数

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

• 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
• 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。定义饱和度; 0% 为灰色， 100% 全色
• 亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。定义亮度 0% 为暗, 50% 为普通, 100% 为白

7.6 display: grid;网格布局

7.6.1 网格布局简介

CSS Grid 网格布局教程

• Grid布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。与Flex布局有一定的相似性，都是可以指定容器内部多个项目的位置。但是它们之间也存在差异。

• Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。Grid布局远比Flex布局强大。

• display: grid; // 指定容器采用网格布局

• 默认情况下容器元素都是块级圆度，也可以设成行内元素

• display: inline-grid;

• 设为网格布局以后，容器子元素（项目）的float display:inline-block display:table-cell vertical-align 和 columb-*等设置都将失效。

• 容器，网格的最外层元素。项目，容器的顶级子元素

7.6.2 容器属性-列宽行高grid-template-columns/grid-template-rows

容器指定了网格布局以后，接着就要划分行和列

• grid-template-columns: 100px 200px 80px 20px; // 每一列的列宽，同时容器被自动划分成对应数据个数列。
• grid-template-rows: grid-template-rows: 60px 80px 60px; // 每一行的行高，若共计四行，只设置三个行高值，则第四个元素默认初始行高。
• 上述列宽和行高，除了使用绝对单位px，也可使用百分比方式。

7.6.2.1 设置行高列宽时可用函数

• repeat(): 有时重复写同样的值非常麻烦，尤其是网格较多时，此时可使用repeat函数，简化重复某个值或某种模式(重复多个值)。
  • repeat(num, a b c …) 将后面a b c设置的值重复num次
  • grid-template-columns: repeat(4, 100px 200px); // 八列，交替100 200
  • grid-template-rows: repeat(2, 33%); // 两行，分别占总高的33%
• auto-fill: 有时单元格的大小是固定的，但是容器的大小不确定。如果希望每一行或每一列容纳尽可能多的单元格，此时可使用auto-fill关键词表示自动填充。
  • grid-template-columns: repeat(auto-fill, 100px); 均匀单元格，一行尽可能放更多的列
• fr 片段：用于表示比例关系，如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
  • grid-template-columns: 1fr 2fr 3fr 1fr; // 将一行分开，四列按比例排放
  • grid-template-columns: 1fr 800px 3fr 1fr; // 将一行分开，第二列800宽，剩余宽度按比例排放
• minmax(): 产生一个长度范围，表示长度就在这个范围之中。
  • grid-template-columns: 1fr 1fr minmax(100px, 2fr) 3fr; // 表示该列最小宽度100px，最大宽度 2fr
• auto： 表示由浏览器自己决定长度
  • grid-template-columns: 100px auto 200px; // 除非设置min-width大于最大宽度，否则第二列基本等于该单元格额最大宽度。

---

7.6.2.2 网格线的名称

grid-template-columns 属性和 grid-template-rows属性里面还可以使用方括号，指定每一根网格线的名字，方便后续的引用

grid-template-columns: [c1] 100px [c2] 120px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
1
2

上述代码指定网格布局为3行 X 3列，所以有4根垂直网格线和4根水平网格线。[]内为这八根线的名字。网格布局中同一根线可以有很多个名字，比如[fifth-line row5]

7.6.3 容器属性-行/列间距 row-gap/column-gap/gap

• grid-row-gap: 10px; // 行间距 行与行之间存在，不像margin，需要将last-child设为0
• grid-column-gap: 8px; // 列间距 列与列之间存在，同上行
• grid-gap: 10px 20px; // 行间距和列间距合并。前面行间距 后面列间距。若省略了第二个值，则默认第二个值等于第一个值。

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

7.6.4 容器属性-grid-template-area定义区域

网格布局允许指定“区域”，一个区域由单个或多个单元格组成。这个区域可以配合class属性、grid-area一起指定某个区域应该展现什么样式

	
	
	

		
A
		
B
		
C
		
D
		
E
		
F
		
G
		
H
		
I
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

我们将对应的area设置成a b c可能语义化并不是很明确，也可以这样设置

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";
1
2
3

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
1
2
3

中间列为点，表示没有用到该单元格，或者该单元格不属于任何区域。

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

7.6.5 容器属性-grid-auto-flow 内容放置顺序

划分网格后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，也可以通过该属性的设置，先列后行。

• grid-auto-flow: row; // 默认情况，先行后列排放，即一行一行放，此时根据列宽位置的设置，决定几列，然后将内容换算成对应的行。
• grid-auto-flow: column; // 先列后行排放，一列一列放，此时根据设置行高的数量决定一共有多少行，然后将内容放置对应行数后生成对应的列
• grid-auto-flow: column dense;
• grid-auto-flow: row dense;

7.6.6 容器属性-justify-items/align-items/place-items单元格内容放置位置

align-items 设置单元格内容的垂直位置（上中下）
justify-items 设置单元格内容的水平位置（左中右）
place-items: 若不设置第二个值，默认与第一个值相等

• start： 对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内部居中
• stretch：拉伸，占满整个单元格的整个宽度

7.6.7 容器属性-justify-content/align-content/place-content整个内容区域在容器里面的位置

整个内容区域 -> 指的是表格形成区域
容器 -> 指的是container这个容器，若设置宽高800X800 但表格区域不一定会占满
justify-content 整个内容区域在容器里面的水平位置
align-content 整个内容区域在容器垂直位置
place-content: 省略第二个值等于第一个值

• start 对齐容器的起始边框
• end 对齐容器的结束边框
• center 容器内部居中
• stretch 项目大小没有指定是，拉伸占据整个网格容器
• space-around 每个项目两侧的间隔相等。所以项目之间的间隔比容器边框的间隔大一倍。与flex中的这个属性定义相同
• space-between 项目与项目之间的间隔相等，项目与容器边框之间没有间隔
• space-evenly 项目与项目之间的间隔相等，项目与容器边框之间也是同样长度的间隔

7.6.8 容器属性-grid-auto-columns/grid-auto-rows超出指定网格的样式

例如我们定义了3X3网格，那么在第四行或第四列时样式就会变成默认的，此时我们可以通过这两个属性进行定制化

• grid-auto-rows: 100px;
• grid-auto-columns: 200px;

7.6.9 容器属性-grid-template/grid合并属性

• grid-template 是grid-template-columns、grid-template-rows和grid-template-area这三个属性的合并简写形式
• grid是grid-template-rows、grid-template、grid-template-area、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性合并的简写形式

7.6.10 项目属性-grid-column-start/grid-column-end/grid-row-start/grid-row-end 指定项目位置

给某个具体的项目设置这几个值，可以指定为第几条网格线，还可以指定为网格线的名字

• 指定第几条网格线

.first-project { // class为first-project的项目
	grid-column-start: 2; // 列 第二条竖线  // 两条竖线合并处算一条
	grid-column-end: 4; // 列 第四条竖线
	grid-row-start: 3; // 行 第三条横线 // 两条横线合并出算一条
	grid-row-end: 4; // 行 第四条横线
}
1
2
3
4
5
6

• 指定网格线的名字

.container {
	display: grid;
	grid-template-columns: [a] 100px [b] 200px [c]300px [d];
	grid-template-rows: [a1] 200px [b1] 100px [c1] 50px [d1];
}

.first-project {
	grid-column-start: a;
	grid-column-end: d;
	grid-row-start: b1;
	grid-row-end: c1;
}
1
2
3
4
5
6
7
8
9
10
11
12

使用这四个属性，如果产生了项目的重叠，则可以使用z-index属性指定项目的重叠顺序。

7.6.11 项目属性-grid-column/grid-row

• grid-column 是grid-column-start和grid-column-end合并简写
• grid-row 是 grid-row-start和gird-row-end合并简写形式

7.6.12 项目属性-grid-area 执行项目放在哪一个区域

• grid-area: e; // 放在某个具体的位置
• grid-area: / / / ;

7.6.13 justify-self/align-self/place-self单元格内容位置

justify-self 设置单元格内容的水平位置
align-self 设置单元格内容的垂直位置
place-self: ; // 若只写一个值，则默认第二个值与第一个相等

• start 对齐单元格的起始边缘
• end 对齐单元格的结束边缘
• center 单元格内部居中
• stretch 拉伸，占满整个单元格的默认宽度

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~