关闭

React opacity animate组件进行不断闪烁

107人阅读 评论(0) 收藏 举报
分类:
<html>
  <head>
    <title>Document</title>
    <script src="../react.js"></script>
    <script src="../react-dom.js"></script>
    <!-- //引用资源,JSX转HTML -->
    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
  </head>

  <body>
    <div id="reactContainer"></div>

    <script type="text/babel"> //babel JSX => HTML
      const Hello = React.createClass({
        getInitialState: () => ({opacity: 1.0}),
        componentDidMount: function() {
          setInterval(function(){
            let opacity = this.state.opacity
            opacity = opacity < 0 ? 1 : opacity -= .05
            this.setState({opacity: opacity})
          }.bind(this), 100)
        },
        render: function() {
          return <div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>
        }
      })

      ReactDOM.render(
        <Hello name="wlh"/>,
        document.getElementById('reactContainer')
      )
    </script>
  </body>
</html>
0
0
查看评论

jquery动画出现闪烁的解决办法

【判断元素是否处在动画状态 可以消除闪烁】 if($(element).is(":animated")){ //判断元素是否正处于动画状态 //如果当前没有进行动画,则添加新动画 }
  • wujiangwei567
  • wujiangwei567
  • 2014-08-07 10:38
  • 968

jquery自定义动画animate()

.test { width: 30px; height: 30px; margin-right: 10px; float: left; background-color: oran...
  • Fanbin168
  • Fanbin168
  • 2015-04-15 17:22
  • 1922

React动画效果

React动画效果平常我们使用的动画效果大多和jQuery.animate()相关,但是React就是被用来取代jQuery的。所以在动画实现的选择上我们常常选择CSS3的原生支持来实现。但是,CSS3的动画过程是:“在什么时间范围内,以什么样的运动节奏完成动画”。在用原生CSS3实现动画时,不好调...
  • mafan121
  • mafan121
  • 2017-09-13 14:21
  • 369

tx4-封装运动框架多属性函数-定时器-透明度-zIndex

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <...
  • stopcpp
  • stopcpp
  • 2016-10-21 13:27
  • 166

《React-Native系列》15、 RN之可触摸组件

今天,我们来看下ReactNative提供的可触摸组件。 分别为:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。 TouchableWithoutFeedback控件是触摸...
  • hsbirenjie
  • hsbirenjie
  • 2016-08-14 23:12
  • 2163

React 周期性改变字体透明度

这次的例子是一个透明度往复变淡的字符串 上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans...
  • z979451341
  • z979451341
  • 2017-04-04 19:57
  • 373

React组件间信息传递方式

React组件间信息传递方式
  • guangyao88
  • guangyao88
  • 2017-05-12 11:55
  • 3965

SVG animate实现呼吸闪烁效果

SVG animate实现呼吸闪烁效果
  • lovemanyue
  • lovemanyue
  • 2017-05-23 18:34
  • 1702

使用EventBus进行组件间通讯

你是否已经厌倦了在两个Fragment之间传递数据,是否已经厌倦了Service与Activity/Fragment之间的通讯,是否已经厌倦了startActivityForResult中的requestCode, resultCode. 快来试试EventBus吧~ EventBus看名字可以理...
  • rongwenbin
  • rongwenbin
  • 2015-12-24 11:30
  • 436

ReactJS读书笔记三:组件的组合和通信

一 组合而不是继承 React组件是无法继承的,即不存在 React.extend 之类的方法可以定义一个子类。 React推崇通过组合的方式来组织大规模的应用。 所以所谓父子组件,就和DOM中的父子元素一样,他们是有从属关系,但没有继承关系。 比如: var Team = Rea...
  • lihongxun945
  • lihongxun945
  • 2015-06-03 20:41
  • 21373
    个人资料
    • 访问:8859次
    • 积分:1019
    • 等级:
    • 排名:千里之外
    • 原创:86篇
    • 转载:9篇
    • 译文:8篇
    • 评论:1条
    文章分类
    最新评论