MUI - 如何在悬停时为卡片深度设置动画？答案

【问题标题】：MUI - How to animate Card depth on hover?MUI - 如何在悬停时为卡片深度设置动画？
【发布时间】：2016-05-06 00:03:58
【问题描述】：

我想在鼠标悬停时为整个Card 的深度设置动画。我试试这个（所以我是 React 的新手），但我不知道该怎么做：

<Card 
  linkButton={true}
  href="/servicios/"
  onClick={Link.handleClick} zDepth={3}
  onMouseEnter={this.setState({zDepth={1}})}>
</Card>

提前致谢。

【问题讨论】：

你只能使用material-ui给你的props，卡片没有zdepth，但是你可以把所有的关心放在一个paper组件中，然后添加到那里
MUI 没有提供 enableHover 什么的，这太荒谬了。保持悬停状态以触发海拔高度的复杂性。

标签： javascript reactjs material-ui

【解决方案1】：

constructor(props) {
  super(props);
  this.state = { shadow: 1 }
}

onMouseOver = () => this.setState({ shadow: 3 });
onMouseOut = () => this.setState({ shadow: 1 });

<Card 
   onMouseOver={this.onMouseOver}
   onMouseOut={this.onMouseOut}
   zDepth={this.state.shadow}
>

更新 #1

完整示例

// StyledCard.js

import React, { Component } from 'react';
import { Card } from 'material-ui/Card';

class StyledCard extends Component {
  state: {
    shadow: 1
  }

  onMouseOver = () => this.setState({ shadow: 3 });

  onMouseOut = () => this.setState({ shadow: 1 });

  render() {
    return (
      <Card 
        onMouseOver={this.onMouseOver}
        onMouseOut={this.onMouseOut}
        zDepth={this.state.shadow}
      >
        {this.props.children}
      </Card>
    );
  }

export default StyledCard;

// Container.js

import React from 'react';
import StyledCard from './StyledCard';

const Container = () => [
  <StyledCard>Card 1</StyledCard>,
  <StyledCard>Card 2</StyledCard>,
  <StyledCard>Card 3</StyledCard>,
];

export default Container;

更新 #2

使用 HOC

// withShadow.js

import React from 'react';

const withShadow = (Component, { init = 1, hovered = 3 }) => {
  return class extends React.Component {
    state: {
      shadow: init
    };

    onMouseOver = () => this.setState({ shadow: hovered });

    onMouseOut = () => this.setState({ shadow: init });

    render() {
      return (
        <Component
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          zDepth={this.state.shadow}
          {...this.props}
        />
      );
    }
  };
};

export default withShadow;

// Container.js

import React from 'react';
import { Card } from 'material-ui/Card';
import withShadow from './withShadow';

const CardWithShadow = withShadow(Card, { init: 2, hovered: 4 });

const Container = () => [
  <CardWithShadow>Card 1</CardWithShadow>,
  <CardWithShadow>Card 2</CardWithShadow>,
  <CardWithShadow>Card 3</CardWithShadow>,
];

export default Container;

【讨论】：

这行得通。但是，如果我有多张卡片，则将鼠标悬停在一张卡片上会改变状态，从而改变所有卡片的深度。当您有多张卡时如何做到这一点？
@SeaWarrior404，您的问题有解决方案吗？我现在遇到了

【解决方案2】：

@Alex Sandiiarov 的回答对我不起作用。文档显示使用 raised 属性。 https://material-ui.com/api/card/

class Component extends React.Component{

  state = {
    raised:false
  }

  toggleRaised = () => this.setState({raised:!this.state.raised});

  render(){
    return <Card onMouseOver={this.toggleRaised} 
      onMouseOut={this.toggleRaised} 
      raised={this.state.raised}>

      ...

      </Card>

  }
}

【讨论】：

仅供参考，您的代码无法编译。您的 toggleRaised 函数中缺少 }。
@haaduken 好地方
@MadisonCourto 我有点困惑……就做<Paper raised="99" />
根据文档，您也可以使用 Paper API 为组件添加更多道具，因此您可以使用“elevation”<Card evelation={5}>material-ui.com/api/paper

【解决方案3】：

5年后依然没有正确答案，悬停时不用设置组件状态，使用伪类:hover即可：

<Card
  sx={{
    ':hover': {
      boxShadow: 20, // theme.shadows[20]
    },
  }}
>

如果你想使用styled():

const options = {
  shouldForwardProp: (prop) => prop !== 'hoverShadow',
};
const StyledCard = styled(
  Card,
  options,
)(({ theme, hoverShadow = 1 }) => ({
  ':hover': {
    boxShadow: theme.shadows[hoverShadow],
  },
}));

<StyledCard hoverShadow={10}>
  <Content />
</StyledCard>

现场演示

【讨论】：