javascript - 如何使用velocity js创建3D显示和隐藏动画

Question

场景

我想隐藏所有元素，然后显示刚刚隐藏的集合中的一个特定元素。这必须在 3D 中发生。

问题

隐藏后，只有最后一个元素有效，并且我没有收到任何错误。

当我使用“hide()”时，以下内容有效；

$(document).on('click', '.navigation_but', function(){
        var nav = $(this).attr('data-nav');
        $(".article_sd").hide();
            $('.'+nav+'').velocity("transition.flipXIn");
    });

但这不起作用，我不知道我做错了什么。

$(document).on('click', '.navigation_but', function(){
            var nav = $(this).attr('data-nav');
            $(".article_sd").velocity("transition.flipXOut");
                $('.'+nav+'').velocity("transition.flipXIn");
        });

标记如下。

HTML

<小时/>

<header>
<nav class="navigation_but" data-nav="article_sd_first">First</nav>
<nav class="navigation_but" data-nav="article_sd_second">Second</nav>
<nav class="navigation_but" data-nav="article_sd_third">Third</nav>
<nav class="navigation_but" data-nav="article_sd_fourth">Fourth</nav>
</header>
<section>
<article class="article_sd article_sd_first" style="background-color:rgba(0,85,0,1)"></article>
<article class="article_sd article_sd_second" style="background-color: rgba(255,255,153,1)"></article>
<article class="article_sd article_sd_third" style="background-color: rgba(153,102,204,1)"></article>
<article class="article_sd article_sd_fourth" style="background-color: rgba(51,51,102,1)"></article>
</section>

还有一些CSS

<小时/>

<style>
    .article_sd { height:100px;}
    </style>

或者如果可能的话，将这种奇特的效果放在适当的位置，如本演示所示；

https://codyhouse.co/demo/page-scroll-effects/opacity.html

$.Velocity
    .RegisterEffect("rotation", {
        defaultDuration: 1,
        calls: [ 
            [ { opacity: '0', rotateX: '90', translateY: '-100%'}, 1]
        ]
    });

$.Velocity
.RegisterEffect("rotation.scroll", {
    defaultDuration: 1,
    calls: [ 
        [ { opacity: '0', rotateX: '90', translateY: '0'}, 1]
    ]
});

Answer 1

我认为问题出在这里

$(document).on('click', '.navigation_but', function(){
        var nav = $(this).attr('data-nav');
        $(".article_sd").velocity("transition.flipXOut");
            $('.'+nav+'').velocity("transition.flipXIn");
    });

当调用第二个速度函数时，

variable nav 元素仍然具有动画效果。我们不希望这样。

我认为您可以尝试两个至少两个选项。

1) 在开始新动画之前停止较早的动画。 $('.'+nav+'').velocity('stop').velocity("transition.flipXIn");

2) 使用速度/jquery 样式回调在第一个动画之后制作第二个动画。

$(".article_sd").velocity("transition.flipXOut", function () {
  $('.' + nav).velocity('transition.flipXIn');
});

请告诉我这是否有帮助。