Question

SCENARIO

我想要隐藏所有元素，然后在刚刚隐藏的集合中显示一个特定元素。这必须发生在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");
    });

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

变量nav元素仍然是动画。我们不希望如此。

我认为你可以尝试至少两种选择。

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

2）使用velocity / jquery样式回调在第一个动画之后动画第二个动画。

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

如果这有用，请告诉我。

如何使用velocity js创建3D节目和隐藏动画

1 个答案: