CSS3转换：如何使用链接触发此事件？JSFiddle内演示_Css_Transition

CSS3转换：如何使用链接触发此事件？JSFiddle内演示

css

CSS3转换：如何使用链接触发此事件？JSFiddle内演示,css,transition,Css,Transition,目前，将鼠标悬停在container div上会触发转换，只是为了向您展示我试图实现的目标。我想在container div上方创建link1和link2，以触发这些转换，其中link1显然会显示第一个div，而link2会将其滑动到第二个div CSS body { margin:0; padding:0; overflow-y:scroll; overflow-x:hidden; } /* elements */ #serpcontainer {

目前，将鼠标悬停在container div上会触发转换，只是为了向您展示我试图实现的目标。我想在container div上方创建link1和link2，以触发这些转换，其中link1显然会显示第一个div，而link2会将其滑动到第二个div

CSS

body {
    margin:0;
    padding:0;
    overflow-y:scroll;
    overflow-x:hidden;
    }

/* elements */

#serpcontainer {
    margin:0;
    width:200%;
    overflow:hidden;
    transition:all .2s ease-out;
    }
#serpcontainer:hover {
    margin:0 0 0 -100%;
    }
#serp1 {
    float:left;
    width:50%;
    background:pink;
    }
#serp2 {
    float:left;
    width:50%;
    background:cyan;
    }

/* animations */

@keyframes slide {
    from {
        margin:0 0 0 100%;
        }
    to {
        margin:0;
        }
    }

HTML

<body>
<div id="serpcontainer">
    <div id="serp1">
        1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
    </div>
    <div id="serp2">
        22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22
    </div>
</div>
</body>


1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22 22

检查此项

根据需要进行更新…

尝试使用此代码

更新了css一些行

效果很好！但是下面的代码更适合我的需要。谢谢你的帮助！假设第二个div中有大量内容，即使在您查看第一个div时，也会显示垂直滚动条。当导致溢出的div不在视图中时，是否有方法隐藏溢出？仅在第二个content div上设置高度和溢出滚动

document.getElementById("anc").addEventListener("click", function() {
   var serpcontainer = document.getElementById("serpcontainer");
   if (serpcontainer.className.indexOf("serp") > -1) {
       serpcontainer.className = "";
   }
   else {
       serpcontainer.className = "serp";
   }
}, false);

    $('.linkOne').click(function(){
        $('#serpcontainer').addClass('linkOneContent');
        $('#serpcontainer').removeClass('linkTwoContent');
    });
    $('.linkTwo').click(function(){
        $('#serpcontainer').addClass('linkTwoContent');
        $('#serpcontainer').removeClass('linkOneContent');
    });