Question

我被困在指令的构造上。我的指令的目的是连续显示元素。

我遇到的第一个问题是，即使在初始化期间评估了“ v-show”指令之前，Vue也会调用我的“ successive-display-animation”指令，在我的示例中可以看到效果不起作用。不是一开始。

在第2步中，我们可以推出其他内容，当我们转到第3步，然后返回到第2步时，如果我单击“显示下一个内容”几次，我想得到的效果就存在隐藏的元素以重新启动没有可见元素的动画。

@MappedSuperclass
public class PKEntity {

    @Id
    @GenericGenerator(name="universal", etc. etc. etc.)
    @GeneratedValue(generator="universal")
    private Long id;

    // Possibly more common columns your entities have
}

Vue.directive('successive-display-animation', function (el, binding, vnode) {
    const $el = $(el);
    if (!$el.is(":hidden")) {
        let i = 0;
        _.forEach($el.children(), (child) => {
            const $child = $(child);
            if (!$child.is(':hidden')) {
                $child.addClass("successiveDisplayAnimation");
                $child.css({
                    animationDelay: `${i * 0.1}s`,
                });
                i++;
            }
        });
    }
})

new Vue({
    el: '#vue',
    data() {
        return {
            currentStep: 1,
            nextContentDisplayed: false,
        };
    },
    methods: {
        goToPreviousStep() {
            this.currentStep = this.currentStep - 1;
        },
        goToNextStep() {
            this.currentStep = this.currentStep + 1;
        },
        toggleTheNextContent() {
            this.nextContentDisplayed = !this.nextContentDisplayed;
        },
    },
});

@keyframes displayAnimation {
    from {
        opacity: 0;
        transform: translate3D(0, 2px, 0);
    }
    to {
        opacity: 1;
        transform: translate3D(0, 0, 0);
    }
}

.successiveDisplayAnimation {
    animation: displayAnimation ease .5s backwards;
}

预先感谢您，吉米。

由Google翻译

Vuejs-与其他指令不一致的指令

0 个答案: