svg动画用复杂交互动画改善用户体验-练习

Posted on Edited on In

书籍中的练习,自己看着效果按照自己的感觉瞎搞的demo,懒得写于是直接贴代码把!!!

发现挺多人搜索这个关键字的(我猜测是下书籍📚的吧hhh)⬇️那我就放pdf吧

书籍我也是通过网络寻找,无意传播

链接: pdfDownload 提取码: 6znw 复制这段内容后打开百度网盘手机App，操作更方便哦

如有侵权,请联系本人立即删除 QQEmail istianlei@qq.com 谢谢🙏🙏🙏

书籍Demo
源码

HTML

随意写的,主要用svg画一些线条和圆,具体的大家可以参考svg文档把

1
2
3
4
5
6
7
8
...
<svg class="magnifier" vieBox="0 0 300 46">
  <!-- 圆 -->
  <circle class="magnifier-c" cx="20" cy="20" r="16" fill="none" stroke="#fff"></circle>
  <!-- 线 -->
  <line class="magnifier-l-c" x1="10" y1="10" x2="20" y2="20" fill="none" stroke="#fff" />
</svg>
...

CSS

css部分写得比较乱(我真垃圾!!!)

主要通过Element添加class来切换(能用css的就不用js)

随便贴一点意思意思emmm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.magnifier-l-c,
 .line-line,
 .main input {
  /* 避免引起回流 */
  visibility: hidden;
  opacity: 0;
}

.magnifier.open .magnifier-l-c, 
.main.open .line-line,
.main.open input {
  /* 避免引起回流 */
  visibility: visible;
  opacity: 1;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取Element
let magnifier = document.querySelector('.magnifier')
let main = document.querySelector('.main')
let line = document.querySelector('.line')
// set click
magnifier.onclick = function() {
  // 判断是否有class
  let hasOpen = magnifier.classList.contains('open')
  console.log(hasOpen)
  // 设置 class
  if (hasOpen) {
    magnifier.classList.remove('open')
    main.classList.remove('open')
    line.classList.remove('open')
  } else {
    magnifier.classList.add('open')
    main.classList.add('open')
    line.classList.add('open')
  }
}

okk了, 大概就这么多,然后具体的可以看源码和书籍Demo

书籍Demo
源码