实现前端弹簧动效

2018-10-09  本文已影响0人  如果你还记得我是小双鱼

原文链接
参考文章npm
用到了一个css-spring的库
虽然这些动画不是页面重要的部分,但是感觉这些小动画会提升页面的好感度。

    npm install css-spring
弹窗动效

除了放大,缩小也能这样处理,还可以应用于旋转,效果如下图所示:

log.png

实际应用

当然以上代码是能帮我们实现部分css
还需要将css 插入到页面中, 将css 插入到head头部,写了一个util

// 获取head 元素
const head = document.head || document.getElementsByTagName('head')[0]
// 创建一个style元素
const style = document.createElement('style')
// 这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
style.type = 'text/css'

function addCSS(cssText) {
  const textNode = document.createTextNode(cssText)
  style.appendChild(textNode)
  head.appendChild(style)
}
// 可以在外部进行引用
module.exports = {
  addCSS,
}
  const springStar = `.star{
  visibility: hidden;
  animation: spring-rotate .59s linear 3 forwards;
}
.star:nth-of-type(2) {
  animation-delay: .15s;
}
.star:nth-of-type(3) {
  animation-delay: .3s;
}`
const modelCss = `.modal{
  animation: spring-show .59s linear forwards;
}
`
addCSS(springStar)

总结: 对单调的h5页面添加了一点点小的动效,感觉挺有意思的,我感觉提高了用户的体验感
在以后的页面中可以使用~

上一篇 下一篇

猜你喜欢

热点阅读