记录一下vue transition 过渡各状态（）
2024-09-01 07:50:47
.slide-fade-enter{
opacity: 0;
transform: translateX(100px);
/*从哪里开始过渡：在过渡之前我就把位置定义在100px的位置,并且透明度从0开始回到默认值*/
}
.slide-fade-enter-active{
/*进入过渡持续中*/
/*一般用于设置进入动画的事件和过渡曲线*/
transition: all 8s ease;
}
.slide-fade-enter-to{
background: red;
/*从动画开始慢慢变到红色背景,进入动画完成后,移除红色背景*/
}
.slide-fade-leave{
/*只持续一帧,没啥用*/
/*离开过渡前*/
}
.slide-fade-leave-active{
/*离开过渡中*/
/*一般用于设置离开动画的事件和过渡曲线*/
transition: all 8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-leave-to{
/*离开过渡后*/
opacity: 0;
transform: translateX(100px);/*过渡到那里去：在离开的过渡位置定义在100px的位置，透明度从默认值回到0*/
}
简写：
/*.slide-fade-enter-active,.slide-fade-leave-active{
transition: all .5s ease; 定义我的过渡持续的时间以及运动曲线
}
.slide-fade-enter,.slide-fade-leave-to{
opacity: 0;
transform: translateX(50px);从50px的地方进入，也将离开到50px的位置去
}*/
最新文章
- ios cell常用属性
- 关于 Graph Convolutional Networks 资料收集
- CMD魔法堂：CMD进入指定目录
- ext4.0绘制chart（柱状图，条形图）
- Android 开发之 ---- 底层驱动开发(一)
- android3.2以上切屏禁止onCreate()
- 移动端页面V2.0项目改版总结
- 虽然net人
- 使用git微命令深入理解git工作机制
- ctf中常见注入题源码及脚本分析
- JAVA继承：编译与运行的关系（编译看左边，运行看右边）
- 运行Java Web项目报错
- Android中文API (109) —— SimpleCursorTreeAdapter
- Linux多线程实践(7) --多线程排序对比
- 2018-2019-1 20189201 《LInux内核原理与分析》补漏_1125写
- Mac上超好用的计时器和秒表
- QT qss资源文件与代码分离
- 牛客练习赛44C
- arcgis在折点处打断并建立网络分析(最短路径等问题)
- vmware 下找不到ifcfg-eth0的问题