@keyframes fade {
|
from {
|
opacity: 0.1;
|
}
|
to {
|
opacity: 1;
|
}
|
}
|
|
@keyframes img-add-view {
|
0% {
|
opacity: 0;
|
transform: scale(0.8);
|
}
|
100% {
|
opacity: 1;
|
transform: scale(1);
|
}
|
}
|
|
// 添加单品
|
@keyframes arr-item-add {
|
0% {
|
opacity: 0;
|
transform: translateY(-100%);
|
}
|
100% {
|
opacity: 1;
|
transform: translateY(0%);
|
}
|
}
|
|
// 删除单品
|
@keyframes arr-item-reduce {
|
0% {
|
opacity: 1;
|
transform: translateY(0%);
|
}
|
100% {
|
opacity: 0;
|
transform: translateY(100%);
|
}
|
}
|
|
// 页面切换动画
|
.fade-transform-leave-active,
|
.fade-transform-enter-active {
|
transition: all 0.3s;
|
}
|
.fade-transform-enter {
|
opacity: 0;
|
transform: translateX(-30px);
|
}
|
.fade-transform-leave-to {
|
opacity: 0;
|
transform: translateX(30px);
|
}
|
|
.fadeChild-transform-leave-active,
|
.fadeChild-transform-enter-active {
|
transition: all 0.3s;
|
}
|
.fadeChild-transform-enter {
|
opacity: 0;
|
transform: translateX(-30px);
|
}
|
.fadeChild-transform-leave-to {
|
opacity: 0;
|
transform: translateX(30px);
|
}
|
