一、总结
1、通过给元素设置style中的transition来实现的。
2、我昨天纠结的效果全部可以通过精读这个代码后实现。
二、原生js如何实现图片翻转旋转效果？
1、效果图
2、代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 #imgWrap {
8 width: 800px;
9 height: 350px;
10 margin: 80px auto;
11 perspective: 800px;
12 }
13
14 #imgWrap img {
15 float: left;
16 height: 80px;
17 width: 80px;
18 border: 1px solid #eee;
19 }
20
21 #btn {
22 width: 100px;
23 text-align: center;
24 font: 16px/40px Arial, Verdana;
25 color: #fff;
26 padding: 0 20px;
27 background: rgb(0, 100, 0);
28 margin: 0 auto;
29 border-radius: 5px;
30 cursor: pointer;
31 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
32 }
33 </style>
34 <script type="text/javascript">
35 /*
36 * 1.闪烁效果（瞬间将宽高都变为0，scale，并且是随机的）
37 * 2.图片从小到大，同时透明度从1变成0（必须是当前图片上一步效果走完了，才会开始）
38 * 3.图片旋转，同时透明度从0变成1，有层次感（位移translate）（当所有图片透明度都变为0的时候，才会开始）
39 */
40 window.onload = function () {
41 var btn = document.getElementById('btn');
42 var imgs = document.querySelectorAll('img');
43 var allEnd = 0;//用来判断所有的图片是否都完成了所有的运动步骤
44 var on = true;//用来决定用户是否可以再次点击
45
46 //给btn添加点击事件
47 btn.onclick = function () {
48 console.log("on:" + on);
49 if (!on) {
50 return;
51 }
52 on = false;
53 var endNum = 0;//运动完成的图片数量
54
55 for (var i = 0; i < imgs.length; i++) {
56 //写成自执行函数的原因：for循环速度很快，将会导致setTimeout中的i找不到值
57 (function (i) {
58 setTimeout(function () {
59 montion(imgs[i], '10ms', function () {
60 this.style.transform = 'scale(0)';//因为函数用了call函数，所以可以用this，否则只能用imgs[i]
61 }, function () {
62 //第二步的运动从这里开始
63 montion(this, '1s', function () {
64 this.style.transform = "scale(1)";
65 this.style.opacity = 0;
66 }, function () {
67 endNum++;//只要有一张图片完成了第二步，则加1
68 if (endNum === imgs.length) {
69 toBig();
70 }
71 })
72 });
73 }, Math.random() * 1000);
74 })(i);
75
76 }
77 //定时器，用来延迟时间，不让图片同步所放
78 };
79
80 //第三个运动效果
81 function toBig() {
82 /*
83 *坐标轴，x,y,z
84 */
85 for (var i = 0; i < imgs.length; i++) {
86 imgs[i].style.transition = '';
87 // imgs[i].style.opacity='1';
88 //想要一个物体有css3中的动作变化，那就需要给它一个初始值
89 imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)';
90 //自执行函数的目的是，为了找到i，否则for循环执行太快，会找不到i
91 (function (i) {
92 setTimeout(function () {
93 montion(imgs[i], '2s', function () {
94 this.style.opacity = 1;
95 this.style.transform = 'rotateY(-360deg) translateZ(0)'
96 }, function () {
97 allEnd++;
98 if (allEnd === imgs.length) {
99 console.log("allEnd:" + allEnd + ',imgs.length:' + imgs.length);
100 //这个条件成立，说明所有的图片都运动完了，接下来才允许再次点击
101 //当所有运动完了以后，才允许再次点击
102 on = true;
103 allEnd = 0;
104 }
105 });
106 }, Math.random() * 1000);
107 })(i);
108 }
109 }
110
111 //运动函数(运动的对象，运动的时间，运动的属性函数，运动完成后要做的事情)
112 function montion(obj, time, doFn, callBack) {
113 obj.style.transition = time;
114 doFn.call(obj);//调用函数，并且把this的指向给obj
115
116 var called = false;//这里的原因是为了解决transitionend调用多次的bug
117
118 obj.addEventListener('transitionend', function () {
119 if (!called) {
120 callBack && callBack.call(obj);//解决如果没有传入第四个callBack参数的问题
121 called = true;
122 }
123
124 }, false);//事件三阶段，第三个参数决定是在捕获阶段还是冒泡阶段，调用此函数,false代表是在冒泡阶段
125 }
126 }
127 </script>
128 </head>
129 <body>
130 <div id="imgWrap">
131 <img src="https://dummyimage.com/1:1x100&text=1" alt="">
132 <img src="https://dummyimage.com/1:1x100&text=2" alt="">
133 <img src="https://dummyimage.com/1:1x100&text=3" alt="">
134 <img src="https://dummyimage.com/1:1x100&text=4" alt="">
135 <img src="https://dummyimage.com/1:1x100&text=5" alt="">
136 <img src="https://dummyimage.com/1:1x100&text=6" alt="">
137 <img src="https://dummyimage.com/1:1x100&text=7" alt="">
138 <img src="https://dummyimage.com/1:1x100&text=8" alt="">
139 <img src="https://dummyimage.com/1:1x100&text=9" alt="">
140 <img src="https://dummyimage.com/1:1x100&text=10" alt="">
141 <img src="https://dummyimage.com/1:1x100&text=11" alt="">
142 <img src="https://dummyimage.com/1:1x100&text=12" alt="">
143 <img src="https://dummyimage.com/1:1x100&text=13" alt="">
144 <img src="https://dummyimage.com/1:1x100&text=14" alt="">
145 <img src="https://dummyimage.com/1:1x100&text=15" alt="">
146 <img src="https://dummyimage.com/1:1x100&text=16" alt="">
147 <img src="https://dummyimage.com/1:1x100&text=17" alt="">
148 <img src="https://dummyimage.com/1:1x100&text=18" alt="">
149 <img src="https://dummyimage.com/1:1x100&text=19" alt="">
150 <img src="https://dummyimage.com/1:1x100&text=20" alt="">
151 <img src="https://dummyimage.com/1:1x100&text=21" alt="">
152 <img src="https://dummyimage.com/1:1x100&text=22" alt="">
153 <img src="https://dummyimage.com/1:1x100&text=23" alt="">
154 <img src="https://dummyimage.com/1:1x100&text=24" alt="">
155 <img src="https://dummyimage.com/1:1x100&text=25" alt="">
156 <img src="https://dummyimage.com/1:1x100&text=26" alt="">
157 <img src="https://dummyimage.com/1:1x100&text=27" alt="">
158 <img src="https://dummyimage.com/1:1x100&text=28" alt="">
159 <img src="https://dummyimage.com/1:1x100&text=29" alt="">
160 <img src="https://dummyimage.com/1:1x100&text=30" alt="">
161 <img src="https://dummyimage.com/1:1x100&text=31" alt="">
162 <img src="https://dummyimage.com/1:1x100&text=32" alt="">
163 <img src="https://dummyimage.com/1:1x100&text=33" alt="">
164 <img src="https://dummyimage.com/1:1x100&text=34" alt="">
165 <img src="https://dummyimage.com/1:1x100&text=35" alt="">
166 <img src="https://dummyimage.com/1:1x100&text=36" alt="">
167 <img src="https://dummyimage.com/1:1x100&text=37" alt="">
168 <img src="https://dummyimage.com/1:1x100&text=38" alt="">
169 <img src="https://dummyimage.com/1:1x100&text=39" alt="">
170 <img src="https://dummyimage.com/1:1x100&text=40" alt="">
171 <img src="https://dummyimage.com/1:1x100&text=41" alt="">
172 <img src="https://dummyimage.com/1:1x100&text=42" alt="">
173 <img src="https://dummyimage.com/1:1x100&text=43" alt="">
174 <img src="https://dummyimage.com/1:1x100&text=44" alt="">
175 <img src="https://dummyimage.com/1:1x100&text=45" alt="">
176 </div>
177 <div id="btn">点击查看效果</div>
178 </body>
179 </html>
三、测试题-简答题
1、js代码可以加到head标题里面么？
解答：可以。加到window的onload方法里面。
2、js代码加到head标签里面怎么样才能获取到元素？
解答：代码写到window的onload里面。 window.onload = function () {} 。
3、如何实现一个函数在另外一个函数执行完成后执行？
解答：不停的判断上一个函数里面的元素是否准备就绪，如果所有元素都准备就绪，if成立就执行函数。
我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
