css3实现一个宽高未知的div的slidedown动画
需求
slidedown和slideup动画被广泛应用于导航栏的下拉菜单中,过去利用DOM操作配合setInterval或setTimeOut,可以制造出非常方便的slidedown过渡动画。使用js和dom操作时,我们着重强调的宽高未知便不是什么大问题,因为使用js获取一个元素的高度实在是再简单不过的事情了。
但随着vue和react的普及,低效且繁琐的DOM操作已经逐渐退出舞台。而强大的CSS3又提供了非常完整的动画功能,因此对于slidedown这类简单的动画效果,使用css便足以实现。
属性和知识点
max-length
transition
都是很简单的东西,知道该利用什么方式实现,便完成了工作的一半。
代码
header {
display: flex;
align-items: center;
justify-content: center;
padding-top: 250px;
}
.div {
background-color: aqua;
transition: all 3.3s;
max-height: 0px;
overflow: hidden;
}
.show {
max-height: 300px;
}
import React from 'react';
import './App.css';
import { RefObject } from "react"
interface IState {
groupEl: any,
myRef: RefObject<HTMLUListElement>,
styleObj: {
},
classList : string
}
interface IProps {
}
class App extends React.Component<IProps, IState>{
constructor(props: IProps) {
super(props);
const Ref = React.createRef<HTMLUListElement>();
this.state = {
groupEl: "",
myRef: Ref,
styleObj: {
},
classList : "div"
}
}
handleClick = () => {
const count = Math.random() * 10 + 1;
let listItem: any[] = [];
for (let i = 0; i < count; i++) {
listItem.push(<li key={i} onClick = {this.onAlert(1)}>d</li>)
}
this.setState({ groupEl: listItem ,classList : "div show"});
}
onAlert:(i:number) => void = (i:number) => {
}
render() {
const { groupEl, myRef,classList} = this.state;
return (
<div className="App">
<header className="App-header">
<section>
<div className={classList}>
<ul ref={myRef}>
{groupEl}
</ul>
</div>
<button onClick={this.handleClick}>获取li标签</button>
</section>
</header>
</div>
);
}
}
export default App;