Question

我使用脚本使内容框在进入时从顶部滑动，然后在退出时向下滑动。

然而，当你点击内容框1的按钮，然后单击内容框2，然后再回到一个，一个从底部而不是顶部进入时，它几乎完美地工作。

我想我明白为什么会发生这种情况（因为代码会在一次点击中运行，因此不是从视口下方移动到视口上方然后进入视图，它只是从下面进入视图）但是可以＆＃39;弄清楚如何让它始终从顶部进入。

HTML：

$('.summernote').summernote({
  toolbar: [
    //[groupname, [button list]]
    ['style', ['bold', 'italic', 'underline', 'clear']]
]
});

CSS：

<div class="slidey slidey1 enter">
    Content Box 1
</div>
<div class="slidey slidey2">
    Content Box 1
</div>
<div class="slidey slidey3">
    Content Box 1
</div>

jQuery的：

.slidey { top:-100% }
.enter { top:0; transition: all 0.7s ease-in-out; }
.exit { top:100%; transition: all 0.7s ease-in-out; }

该页面无法再查看。

Answer 1

添加一个类后，你应该分配一个"transitionend"监听器，例如ie：

$(".myElement").addClass("transitionClass").on("transitionend", function() {
    // Transition ended.
    // Do more stuff.
});

我重新创建并简化了你的HTML，CSS来创建这个例子，所以你可能想忽略那个部分，但是要专注于jQ代码。甚至可以开箱即用。

＆＃13;

$(document).ready(function(){
  
  var $slides = $(".slidey");
  
  $(".changer").click(function( e ){
    e.preventDefault(); // Instead of return false;
    var num = $(this).data("slidey");
    var $target = $(".slidey"+ num);
    
    $(".enter").not($target) // (not the already active one)
      .removeClass("enter")  // remove unwanted classes
      .addClass("exit")      // make it go to bottom
      .on("transitionend", function(){ // snap it back to -100% top...
              $(this).removeClass("exit"); // by removing the exit class.
      });

    $target.addClass("enter"); // Animate current down into view
    
    // UL links
    $(".changer").removeClass("link_change");
    $(this).addClass("link_change");

  });
  
});

＆＃13;

*{margin:0;}
html, body{height:100%;}
body{overflow:hidden;}

#navbar{
  position:absolute;
  bottom:130px;
  right:130px;
}
#navbar ul {list-style:none;}

.link_change{
  color:fuchsia;
}

.slidey {
  position:absolute;
  width:50%;
  height:90vh;
  background:#ddd;
  top:-100%;
}
.enter {
  top:0;
  transition: all 0.7s ease-in-out;
}
.exit {
  top:100%;
  transition: all 0.7s ease-in-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <ul id="navlinks">
    <li class="changer changer1 link_change" data-slidey="1">home</li>
    <li class="changer changer2" data-slidey="2">profile</li>
    <li class="changer changer3" data-slidey="3">message</li>
  </ul>
</div>

<div class="slidey slidey1 enter">Content Box 1</div>
<div class="slidey slidey2">Content Box 2</div>
<div class="slidey slidey3">Content Box 3</div>

＆＃13;

在转换结束时添加新动画

1 个答案: