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

[xiaotiandada]

2019-07-07 23:53:32

书籍Demo
源码

https://codei.netlify.com/gist/b4c50cbd51edb77d431fe4d5929128ab

HTML

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

  ...
  <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

.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

// 获取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
[源码](