如何在反应中滑动或隐藏带有过渡的div?
Posted
技术标签:
【中文标题】如何在反应中滑动或隐藏带有过渡的div?【英文标题】:How to slide or hide a div with transition in react? 【发布时间】:2018-09-06 02:58:04 【问题描述】:我正在尝试通过单击具有幻灯片效果的按钮来显示 div。当点击某物时,它将切换为显示或不可见的幻灯片效果。到目前为止,我已经通过这样做实现了这一点。
class App extends Component
constructor()
super();
this.state =
myclass: '',
this.divclicked = this.divclicked.bind(this);
divclicked()
if (this.state.myclass === '')
this.setState(
myclass: 'coolclass'
)
else
this.setState(
myclass: '',
)
render()
return (
<div className="App">
<div id="box" onClick=this.divclicked>
</div>
<div id="seconddiv" className=this.state.myclass>
<p>help help</p>
<p>help help</p>
<p>help help</p>
<p>help help</p>
<p>help help</p>
</div>
</div>
);
export default App;
还有我的 CSS
#box
height: 50px;
width: 50px;
background-color: red
#seconddiv.coolclass
height:300px;
background: purple;
#seconddiv
height: 0px;
transition: 0.5s;
overflow: hidden;
所以在这里,当点击 id 为“box”的红色框时,我给“seconddiv”一个类名,CSS 负责隐藏 div。问题是当我给出类名coolclass
时,我不想使用 px 但想使用百分比。所以目前,它是从 0px 到 300px。但我希望它从 0px 到 100%;我如何做到这一点。当我尝试将 100% 的高度放在 seconddiv 中时,幻灯片动画不起作用。
【问题讨论】:
希望animate.css
包对你有帮助
【参考方案1】:
您可以将条件渲染(x && y)与一些缩放动画
结合起来例子
const scaleAnimationIn = keyframes`
0%
transform: scale(0, 1);
animation-timing-function: ease-out;
100%
transform: scale(1, 1);
`
const QuestionHeaderPausedText = styled.div`
animation: $scaleAnimationIn 1s;
animation-delay: 7s;
animation-fill-mode: both;
`
在 return/render 方法中:
isSomeConditionTrue && <QuestionHeaderPausedText>
My text
</QuestionHeaderPausedText>
此示例使用样式化组件,但该方法(缩放)适用于任何 css 解决方案。
【讨论】:
【参考方案2】:您需要将初始高度设置为0%
。您还需要将.App
的高度设置为100%
,以便它拉伸窗口的整个高度。在这个例子中,我给了它一个 1200px 的静态高度,但这应该由 body 决定。
class App extends React.Component
constructor()
super();
this.state =
myclass: '',
this.divclicked = this.divclicked.bind(this);
divclicked()
if (this.state.myclass === '')
this.setState(
myclass: 'coolclass'
)
else
this.setState(
myclass: '',
)
render()
return (
<div className="App">
<div id="box" onClick=this.divclicked>
</div>
<div id="seconddiv" className=this.state.myclass>
<p>help help</p>
<p>help help</p>
<p>help help</p>
<p>help help</p>
<p>help help</p>
</div>
</div>
);
ReactDOM.render(<App/>,document.getElementById('root'));
#box
height: 50px;
width: 50px;
background-color: red
#seconddiv.coolclass
max-height:100%;
background: purple;
#seconddiv
max-height: 0%;
transition: 0.5s;
overflow: hidden;
.App
height: 100%;
#root
height: 1200px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
【讨论】:
谢谢。但我试图做的是让 seconddiv 只增长到五个 p 标签,或者让它的高度 onclick 等于孩子们需要的任何东西。目前,在您提供的代码中,高度涵盖了页面的完整视图。抱歉,我之前没有说清楚。 @craftdeer 好的,更新答案来纠正这个问题。你需要给.App
一个高度100%
和你的#root
div 来渲染你的整个React 应用程序需要一个设定的高度。您还需要将转换从使用 height
更改为使用 max-height
。
太棒了。谢谢你。为什么必须将 App 高度设置为 100% 才能正常工作,而 root 的高度为 1200px?
@craftdeer 这是因为当您使用百分比时,它基于 parent 元素。所以默认情况下,元素会得到height: auto
。 100%
或 auto
不起作用,这意味着 .App
需要设置高度,以便子 div 可以在其高度百分比计算中使用它。但是,当我们查看.App
的父级时,它也没有设置高度,因此.App
上的100%
也不起作用。所以,从顶部开始,如果#root
是1200px
高,那么.App
是100%
的1200px
。现在,我们的孩子有一个设定的高度,他们可以用来在 0 - 100% 之间切换。希望对您有所帮助。
太棒了。最后一个问题承诺。当您将根高度设置为 1200 像素时,如果我在页面中添加更多内容并且这些内容的高度超过 1200 像素,那会不会导致问题?以上是关于如何在反应中滑动或隐藏带有过渡的div?的主要内容,如果未能解决你的问题,请参考以下文章