react-motion实现一个数字上下调整效果代码
代码语言:html
所属分类:动画
代码描述:react-motion实现一个数字上下调整效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arimo'> <style> .vote { font-family: "Arimo", sans-serif; text-align: center; color: #525558; user-select: none; cursor: default; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .vote__arrow { width: 32px; margin: 8px 0; fill: none; stroke-width: 2; stroke: #abaeb1; cursor: pointer; transition: transform 150ms ease-in-out; } .vote__arrow:active { transform: scale(1.15); } .vote__arrow--up:active { stroke: #b4da55; } .vote__arrow--down:active { stroke: #F33119; } .vote__columns { display: flex; align-items: center; justify-content: center; } .vote__column { height: 48px; font-size: 42px; overflow: hidden; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-motion.js"></script> <script type="text/babel"> const { Component, Children, PropTypes } = React const { Motion, spring } = ReactMotion const Arrow = ({direction, ...props}) => ( <svg viewBox="0 0 28 12" {...props}> <polyline points={ direction === 'up' ? "0.595,11.211 14.04,1.245 27.485,11.211" : "27.485,0.803 14.04,10.769 0.595,0.803" } /> </svg> ) Arrow.defaultProps = { direction: 'up'.........完整代码请登录后点击上方下载按钮下载查看
网友评论0