Question

我使用css过渡来显示pageload上的动画线条。使用jquery脚本启动行Im来更改行元素上的类。

我想在加载下一页时反转CSS转换。在页面加载上绘制线条 - 对于下一页我希望它们在下一页再次绘制之前绘制出来。我想我需要加载类似ajax的页面，以便在页面之间实现无缝过渡？

演示：https://d157rqmxrxj6ey.cloudfront.net/jerryskate/8667/

HTML：

<html lang="en" class="noTouch">
 <!-- META DATA -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">



 <body class="page-ready">
 <link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<script src="transitions.js"></script>


<main class="main wrapper js-pageTransition">


<li class="col--xs--6 projectThumb">
  <a href="page1.html">

    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page1</h3>
        </div>
      </div>
    </figure>
  </a>
</li>


<li class="col--xs--6 projectThumb">
  <a href="page2.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page2</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page3.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page3</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page4.html">
    <figure>

      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page4</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page5.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page5</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page6.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page6</h3>
        </div>
      </div>
    </figure>
  </a>
</li>


 <span class="menu-mask"></span>
 <span class="h-line h-line--1"></span>
 <span class="h-line h-line--2"></span>
 <span class="h-line h-line--3"></span>

 <span class="v-line v-line--left"></span>
 <span class="v-line v-line--middle"></span>
 <span class="v-line v-line--right"></span>

CSS：

.h-line {
 position: absolute;
 z-index: -1;
 width: 0%;
 height: 5px;
 right: 0;
 background-color: #EDEDED;
 transition: right 1.5s linear;
 }
.h-line--1 {
 top: 400px;
 transition-delay: 2s;
 }
 .h-line--2 {
 top: 800px;
 transition-delay: 3s;
 }
 .h-line--3 {
 top: 600px;
 transition-delay: 4s;
 }
.h-line--4 {
 top: 1600px;
 transition-delay: 4s;
 }
 .h-line--5 {
  top: 1800px;
  transition-delay: 4s;
 }
 .h-line--6 {
 top: 2200px;
 transition-delay: 4s;
 }
 .v-line {
 position: fixed;
 z-index: -1;
 width: 5px;
 height: 0%;
 background-color: #EDEDED;
 bottom: 100%;
 transition: bottom 1.5s linear;
 }
.page-ready .v-line { bottom: 0 }
.v-line--left {
 left: 58%;
 transition-delay: 1s;
 }
.v-line--middle {
 left: 84%;
 transition-delay: 2s;
 }
.v-line--right {
 left: 95%;
 transition-delay: 2.4s;
 }
.h-line {
 width: 0!important;
 transition: width 1.5s linear!important;
 }
.h-line.h-line--2.ready { transition: width 3s linear!important }
 span.h-line.h-line--2.ready{
 width: 100%!important;
 transition: width 1.5s linear!important;
 left: 0!important;
 right: initial!important;
 }
.h-line.ready { width: 100%!important }
span.v-line.v-line--left.ready {
height: 100%!important;
transition: height 1.5s linear!important;
bottom: 0!important;
top: initial!important;
}

span.h-line.h-line--1.ready {
width: 100%!important;
transition: width 1.5s linear!important;
}
span.v-line.v-line--middle.ready {
  height: 100%!important;
  transition: height 1.5s linear!important;
  bottom: 0!important;
  top: initial!important;
 }
span.v-line.v-line--right.ready {
  height: 100%!important;
  transition: height 1.5s linear!important;
  bottom: 0!important;
  top: initial!important;
  }

 span.v-line.v-line--left.ready {
 height: 100%!important;
 transition: height 1.5s linear!important;
  bottom: 0!important;
  top: initial!important;
  }
  span.h-line.h-line--3.ready {
  width: 100%!important;
  transition: width 1.5s linear!important;
   left: 0!important;
   right: initial!important;
   }
  .h-line.h-line--3.ready {
  transition: width 3s linear!important;
  }

脚本：

$(function () {
$('.v-line, .h-line').addClass('ready');
});

Answer 1

您可以使用transitionend事件，当CSS转换完成时会触发。

点击链接时，您还必须阻止导航。

//Add listener on <a> nodes
$('a').click(function(e){
    //cancel the navigation.
    e.preventDefault(); 

    //take a reference of the clicked link
    var linkNode = this;

    $('.v-line, .h-line')
        //remove the classe (you have also to add reverse transition)
        .removeClass('ready')

        //add the "transitionend" event.
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
            function(e) {
                //navigate to the href on clicked link.
                document.location.replace( linkNode.href );
            }
        );
);

关于无缝转换，是的，如果您加载新页面，则无法避免它， ajax是一种在没有完全重新加载的情况下更新页面所需内容的好方法。

Answer 2

此解决方案使用Event Delegation。在这种情况下，Jquery捕获元素上的单击，然后删除CSS类。

如果您在用户点击时使用以下代码，动画将反向播放，页面将会更改。虽然页面更改会中断动画。

转到您的网页，将以下代码粘贴到浏览器控制台中，然后点击链接以查看其是否有效。

$("body").on("click","a",function( event ){ 
$('.v-line, .h-line').removeClass('ready');});

为了让您在更改页面之前完成整个CSS动画，您可能需要使用Event Prevent Default。此功能可以停止发生原始点击。这意味着您需要在动画完成后手动触发事件。

转到您的网页，将以下代码粘贴到浏览器控制台中，然后点击链接以查看其是否有效。

请注意，由于阻止了默认行为，页面不会更改，但动画现在有足够的时间来完成。

$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
$('.v-line, .h-line').removeClass('ready');});

在下一页加载之前创建第二个css转换

2 个答案: