同步 css3 过渡答案

【问题标题】：Synchronize css3 transitions同步 css3 过渡
【发布时间】：2023-03-08 14:02:01
【问题描述】：

我看了下example

我正在尝试创建一个使用幻灯片切换页面的示例，当当前页面向左滑动时，我不会使用它（如滚动条）进行下一张幻灯片。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" type="text/css" href="css/animations.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style>
    html{
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
    }

    #wrapper{
         background-color: #000000;
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
    }

    .page{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        overflow: hidden;
        backface-visibility: hidden;
    }

    .current{
        visibility: visible;
        z-index: 1;
    }
</style>

<script>
    $(document).ready(function(){
        $("#p12").click(function(){

            $("#page1").addClass("pt-page-moveToLeft");
            //$("#page2").addClass("current");
            //$("#page2").addClass("pt-page-moveFromLeft");
            //$("#page1").removeClass("current");
        });
    });

    $(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
        alert("finished");
    });
</script>

</head>

<body>
    <div id="wrapper">
        <div id="page1" class="page current" style="background-color: #FF9999;">
            <h1>page1</h1>
            <button id="p12">next</button>
        </div>      
        <div id="page2" class="page" style="background-color: #00ff00;">
            <h1>page2</h1>
        </div>
        <div id="page3" class="page" style="background-color: #0000ff;">
            <h1>page3</h1>
        </div>
    </div>
</body>
</html>

如何同步pt-page-moveToLeft 和pt-page-moveFromLeft 的2 个转换？

注意：我找到了this，但它对我也不起作用

编辑：

见jsFiddle

编辑（2）：

对不起我的英语，我的意思是我不会支持从第 1 页转到第 3 页而不通过第 2 页或使用其他转换的功能。

【问题讨论】：

如果两个页面的移动方式完全相同，那么将所有页面放在一个 div 中并单独为该页面设置动画不是更容易吗？
它会更复杂，我要求简化问题。
一开始我不会捕捉动画结束事件

标签： html css css-transitions

【解决方案1】：

这是一个简单的例子：http://jsfiddle.net/jcXDf/2/

它使用以下 jQuery 代码：

$(document).ready(function(){
  $("button").click(function(){

  $("#page1").animate({"left": "-100%"}, "fast");
  $("#page2").animate({"left": "0"}, "fast");

  });
});

您当然也可以修改它以适应多个页面。

编辑这个扩展示例应该满足您的需求：http://jsfiddle.net/jcXDf/4/

【讨论】：

看起来很不错，但是如果我想从第 1 页转到第 3 页或添加其他过渡怎么办？这就是为什么我不会使用 CSS3 动画。

【解决方案2】：

我不确定我是否理解了这个问题.. 这对您有进一步帮助吗？ JsFiddle

$(document).ready(function(){
    $("#p12").click(function(){

        $("#page1").removeClass('current').addClass("is-left");

    });
});

$(".page").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
        $("#page2").addClass("current").removeClass('is-right');
    });

另外，请下次在您的问题中创建一个小提琴并链接到它，这样人们就不必复制/粘贴您的代码。

我会这样做

JsFiddle

【讨论】：

我需要像你一样的东西，但要激活当前页面和下一页转换，所以我看不到黑色背景，就像问题开头链接中的转换一样。我还在问题末尾添加了 jsFiddle。
您可以将第二个动画的代码移动到第一个动画的正下方：jsfiddle.net/jonigiuro/jcXDf/3