老师，关于换页旋转的实现

来源：7-15 换页旋转动画效果的实现

qq_一琴心一_0

2018-08-29

我发现styled-components也可以作为组件接收props值，那我是不是可以每次点击换一批让传入的值加360；

这样是不是会更符合数据驱动，避免操作dom元素？

.icon-spin {
  display: inline-block;
  font-size: 12px;
  margin-right: 2px;
  transition: all .2s ease-in;
  transform: rotate(${props => props.iconRotate}deg);
  transform-origin: center center;
}

写回答

2回答

Dell

2018-08-29

已采纳

可以的，这样没问题

qq_一琴心一_0

非常感谢！

2018-08-29

共1条回复

codyooo

2018-09-04

//jsx 这样做要把rotate的旋转值放到redux中
<SearchInfoSwitch
onClick={() => handleChangePage(page, totalPage)}
rotate={this.props.rotate}
>
<i className="iconfont spin icon-Refresh" />
换一批
</SearchInfoSwitch>



//styled componetnt
export const SearchInfoSwitch = styled.a.attrs({
rotate: props => props.rotate || 0
})`
  float:right;
  font-size: 12px;
  text-decoration: none
  color:#969696;
  cursor:pointer;
  transition:color .4s;

  &:hover {
      color:black;
  }

  &:hover .spin{
      color:black;
  }

  .spin{
    display:block;
    float:left;
    color:#969696;
    font-size:12px;
    box-sizing:border-box;
    transition: all .4s ease-in;
    transform: rotate(${props => props.rotate}deg);
    tranform-orgin: center center;
  }
`;

胖虎啊咔咔咔

慕田峪8178134

同学你好怎么解决的我也遇到这个问题

2019-06-06

共3条回复

React零基础入门到实战，完成企业级项目简书网站开发

主流新技术 React-redux，React-router4，贯穿基础语法

5275 学习 · 2496 问题

查看课程

相似问题

关于异步接收数据处理为immutable类型的问题

回答 1