ten-design-vue/theme/transition.less

ten-vue

// 全局的过渡动画类
// vue <transition> 风格

// varable
@cubic-bezier: cubic-bezier(0, 0.48, 0.33, 1);
@duration: 0.3s;
@transition: all @duration @cubic-bezier;
@flowin-transition: opacity @duration @cubic-bezier, transform @duration @cubic-bezier;

@transform-x: 10px;
@transfrom-y: @transform-x;
@scale: 0.95;

// flow-in
@flow: ten-flow-in;
.@{flow}-enter,
.@{flow}-exiting,
.@{flow}-leave-to {
  transform: translateY(@transfrom-y) scale(@scale);
  opacity: 0;
  transition: @flowin-transition;
}

.@{flow}-enter-to,
.@{flow}-entering,
.@{flow}-leave {
  opacity: 1;
  transform: none;
  transition: @flowin-transition;
}

.@{flow}-enter-active {
  transition: @flowin-transition;
}
.@{flow}-leave-active {
  transition: @flowin-transition;
}

// fade-in
@fade: ten-fade-in;
.@{fade}-enter,
.@{fade}-exiting,
.@{fade}-leave-to {
  opacity: 0;
  transition: @transition;
}

.@{fade}-enter-to,
.@{fade}-entering,
.@{fade}-leave {
  opacity: 1;
  transition: @transition;
}

.@{fade}-enter-active {
  transition: @transition;
}
.@{fade}-leave-active {
  transition: @transition;
}

// slidedown
@slidedown: ten-slide-down;
.@{slidedown}-enter-active, .@{slidedown}-enter-active * {
  transition: all .3s;
}
.@{slidedown}-leave-active, .@{slidedown}-enter-active * {
  transition: all .3s;
}