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;

css3实现一个宽高未知的div的slidedown动画相关推荐

css 宽高自适应的div 元素如何居中垂直居中
在我们编写css 样式的时候经常会遇见一个问题那就是一个宽高未知的元素要让他垂直居中如何实现这个呢下面是我常用的两种方法上代码下面的是结构代码 <div class=" ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
CSS:仅对子盒子修饰样式，三种让其在父盒子中水平垂直居中的方法及其优缺点(父盒子宽高未知)
1.给父盒子相对定位,子盒子绝对定位,left,top,right和bottom,都设置为0: position: absolute; left: 0; right: 0; top: 0; botto ...
宽高未知且居中，内容居左
父级parent设置position:relative:子级parentBox设置position:absolute:left:0:right:0:overflow:hidden: 上面的设置可使外层 ...
CSS子元素居中(父元素宽高已知，子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
宽高不定div水平、垂直居中
宽高不确定div居中宽高不定的div水平垂直居中在前端页面布局中经常用到,它能够根据当前页面的大小做到自适应,使页面展示更协调:由于比较重要,因此在前端面试的时候此知识点会经常被问到. 水平垂直居中 ...
原生图片预览实现及由此引出的图片自适应宽高问题探索
看到手机相册,突发奇想:能不能用实现一个原生的页面"相册"?或者说,传统网页中怎么实现图片预览功能? 如果在原生网页中使用插件,那必不可少的要引入一堆东西(并不是鄙视插件,只是为了 ...
如何给行内元素设置宽高
我们都知道行内元素直接设置宽高是无效的.当我们在面试中遇到这个问题的时候,很容易想到给它设置 display:block或者display:inline-block就可以了,但是面试官来了句" ...

css3实现一个宽高未知的div的slidedown动画

css3实现一个宽高未知的div的slidedown动画

需求

属性和知识点

代码

css3实现一个宽高未知的div的slidedown动画相关推荐

最新文章

热门文章