利用transition做一个从上之下的渐入

最新推荐文章于 2024-04-25 16:16:15 发布

pink味的草莓

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量540

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/ferwagrea/article/details/130227840

版权

/* 开始 */
//dialogFade 是容器的类名 
<!-- 内部元素或组件的显示和隐藏，会触发transition效果 -->
<transition name="dialogFade">过度内容</transition >
.dialogFade-enter,
.dialogFade-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
/* 过程 */
.dialogFade-enter-active {
  transition: all 0.5s;
}
/* 结束 */
.dialogFade-enter-to {
  opacity: 1;
}
.dialogFade-leave-active {
  transition: all 0.5s;
}

过度内容的显示和隐藏，会触发transition效果