过渡
兼容
-
-webkit- safrai
-
-ms-
-
-moz- firefox
-
-o- opera
步骤
-
设置出过渡效果
-
更改css值
-
语法:transition:过渡的css属性名称 过度时间 过渡的效果曲线 过渡效果何时开始
-
案列:
.fade-enter-active,.fade-leave-active{
transition: opacity .5s;
}
.fade-enter,.fade-leave-to{
transition: opacity 0;
}
-
属性全名:
-
transition 四个属性的简写
-
transition-property 属性名称
-
transition-duration 过渡时间 默认0
-
transition-timing-function 过渡时间的效果曲线 默认 ease
-
transition-delay 过渡开始时间 默认0
-
动画
步骤
-
规定动画名称
-
规定动画时常
-
语法:animation: 名称 时长
-
案列:animation:bounce-in .5s 表示名称为bounce-in的动画持续0.5秒 如果不过定动画效果就无效果因为时间默认为0.
-
兼容
-
safari/chrome -webkit-
-
firfox -moz-
-
语法:@keyframes animationname {keyframes-selector {css-styles;}} from to/0%-100% 为了获得最佳的浏览器支持 当用选择器0%-100%
-
案列
-
@keyframes bounce-in{
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
-