Question

因此，我向Codrops form添加了一个后退按钮，将与“ nextQuestion”相同的功能克隆到“ prevQuestion”并进行了一些更改：

stepsForm.js

递减的当前问题迭代器--this.current;
在addClass / removeClass函数上将类“ show-next”更改为“ show-prev”
已删除验证，因为所有字段都不是必填项

index.html

在输入元素下添加了辅助标签

<span class="info-message"><label>(some info)</label></span>

当触发nextquest箭头按钮或Enter键时，此标签和主标签均完美且一致地使“ moveUpFromDown”动画。现在，当触发新创建的上一个问题按钮时，我只想要相反的动画，即“ moveDownFromUp”。

这是我在 css 中添加的内容以使其正常工作

.show-prev .questions li > span label {
    display: block;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
.show-prev .questions li.current > span label {
    -webkit-animation: moveDownFromUp 0.4s both;
    animation: moveDownFromUp 0.4s both;
}
@-webkit-keyframes moveDownFromUp {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}

@keyframes moveDownFromUp {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); transform: translateY(0); }
}

现在，当我触发功能正常运行时，除了标签的动画外，还有一个小故障（动画不流畅），并且在动画期间，主标签在输入下方的次要标签下滑动。请找出我到目前为止是否做过任何错误。

非常感谢您的宝贵建议和反馈。

P.S。由于我在本地服务器上工作，因此无法共享到项目的链接。

鼓膜/ Codrops最小形式前一场动画故障

0 个答案: