绝对定位居中、动画

绝对定位居中、动画

绝对定位居中

/*其余需要的属性自行添加*/
div{
	left:50%;
	transform:translateX(-50%);
}

动画（两种）
1.transition
2.animation

1. 利用transition实现简单的div向右滑动效果

div{
	position:absolute;
	transition: transform .3s cubic-bezier(0.65,0.05,0.36,1)
	/*
	transform为需要动画效果的属性（具体参数类型查看官方文档）
	.3为执行动画需要的时间
	cubic-bezier(...)为动画的曲线
	*/
}

然后通过js代码设置需要改变div的transform属性

//state.property为触发滑动的条件
<div style=
{{tranform:state.property?"translateX(0)":"translateX(180px)"}}>
向右滑动条</div>

2. 利用transition实现简单toast效果

div{
	animation:toast 3s;/*toast为动画命名 3s为动画执行时间*/
	animation-direction:alternate;
	/*alternate使动画先向前执行再向后执行*/
	/*其余参数参考官方文档*/
}
/*上文定义的动画名称*/
/*25% 50% 75%三个相同的属性设置是为了实现toast下滑时停留的效果*/
@keyframes toast{
	0%{top:0,opacity:0}
	25%{top:50px,opacity:1}
	50%{top:50px,opacity:1}
	75%{top:50px,opacity:1}
	100%{top:0,opacity:0}	
}

/*换成translateY效果会更流畅*/
/*如下：*/
@keyframes toast{
	0%{transform:translateY(0),opacity:0}
	25%{transform:translateY(150px),opacity:1}
	50%{transform:translateY(150px),opacity:1}
	75%{transform:translateY(150px),opacity:1}
	100%{transform:translateY(0),opacity:0}	
}

/*以上两种皆可*/

p元素如何在th里居中

th{
	vertical-align: middle;
}