quickapp-dsl-vue icon indicating copy to clipboard operation
quickapp-dsl-vue copied to clipboard

Published 20 hours ago • verified publisher icon quickappcn

[bug] animation-fill-mode 对translateX(200%) 以百分比为单位的不生效

Open deepkolos opened this issue 6 years ago • 0 comments

animation-fill-mode: forwards;对于百分比单位的transform不生效, 在压入后台再切回前台的时候

hap-animation-fill-mode-percent-bug

.animated-x {
  animation-name: translateX;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform: translateX(200%);
}

@keyframes translateX {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0%);
  }
}

复现代码在 https://github.com/deepkolos/todomvc-vue/blob/master/src/pages/animation/index.vue#L19

deepkolos avatar May 29 '19 02:05 deepkolos