从第一个div平滑滑动到第三个 [英] Smooth sliding from first div to third

问题描述

我觉得我缺乏找到我正在寻找答案的术语。



我有一个'向导'过程，有4个步骤。从第1步到第2步，第2步到第3步和第3步到第4步滑动是顺畅的，然后返回一步。



步骤2是可选的。用户可以单击步骤1中的步骤3.然后，我的事务将在步骤2中向右滑动。我想避免这种情况。如果用户从步骤1滑动到3，那么它应该看起来像第1步消失，第3页看起来就像没有第2阶段一样。如果他们想要导航回来并审查任何其他任何步骤，则相同。



有没有一种简单的方法可以做到这一点，还是我必须将页面宽度更改为零？我是否可以在需要时构建导航，只需将页面添加到当前页面的左侧或右侧？



任何建议都会有帮助

谢谢

Andy





编辑小提琴 - JSFiddle [ ^ ]



我尝试了什么：



每一步编号。这是我使用的简单转换函数：

  var  navigate =  function （步骤）{
 
  var  margin = step * -100; 
 
 wizard.animate（{marginLeft：margin +  ％}， {duration： 600 ，缓和：  easeInSine，complete： function （）{}}）; 
 
} 
 

这里有一个jsFiddle模拟问题

编辑小提琴 - JSFiddle [ ^ ]

解决方案

可能有更简洁的方法来执行此操作，但这似乎有效： 编辑小提琴 - JSFiddle [ ^ ]



更改款式：

 。页面持有人 {
 职位 ：  relative;  
} 
 
。 page  {
  position  ： 绝对值;  
  top  ：  0;  
  left  ：  0;  
  width  ：  100％;  
 < span class =code-attribute> transform  ：  translate（0,0）;  
} 
。 page 。 animate  {
 转换 ： 转换0.6s缓入;  
} 
。 page 。 left  {
 转换 ：  translate（-100％，0）;  
 } 
 。 page 。 right  {
  transform  ：  translate（100％，0）;  
} 

将类正确添加到除第一个以外的所有页面：

< pre lang =JavaScript> container.find（' .page：not（：first-child）'）。addClass（' right'）;

或者您可以在标记中执行此操作。



设置页面持有者的高度，因为我无法在CSS中找到一种方法使其包含绝对定位的孩子：

  var  maxHeight =  0 ; 
  var  container = 

（' 页保持器'）。

container.find（' .page'）。each（ function （）{
maxHeight = Math .max（maxHeight，

（ this ）。height（））;
}）;

container.height（maxHeight）;

更改 else 阻止 currentPageIndex 更改观察者：

  else  {
  var  allPages = container.find（'  .page'）。removeClass（'  animate left right' ）; 
 
  //  上一页需要设置动画： 
 allPages .eq（oldVal）.addClass（'  animate'）; 
 
  //  与新页面一样： 
  var  newPage = allPages.eq（newVal）.addClass（'  animate ）; 
 
  //  将所有其他页面移至正确的一边： 
 newPage.prevAll（'  .page'）。addClass（'  left'）; 
 newPage.nextAll（'  .page'）。addClass（'  right'）; 
} 

现在页面跳正确。 ：）

Hi,

I think I lack the terminology to find the answer I'm looking for.

I have a 'wizard' like process with 4 steps. Sliding from step 1 to 2, 2 to 3 and 3 to 4 is smooth as well as going back a single step.

Step 2 is optional. The user can click on step 3 from step 1. My transaction will then slide right across step 2. I want to avoid this. If the user slides from step 1 to 3 then it should look like step 1 disappears left and page three appears right as if there was no stage 2. They same if they want to navigate back and review any step from any other.

Is there an easy way to do this or do I have to play with changing page width to zero? Can I instead construct the navigation as and when it is required and just add the pages to the left or right of the current page?

Any advise would be helpful
Thanks
Andy


Edit fiddle - JSFiddle[^]

What I have tried:

Each step is numbered. Here is the simple transition function I use:

var navigate = function (step) {

    var margin = step * -100;

    wizard.animate({ marginLeft: margin + "%" }, { duration: 600, easing: "easeInSine", complete: function () { } });

}

here is a jsFiddle mock up pf the problem
Edit fiddle - JSFiddle[^]

解决方案

There might be a cleaner way to do this, but this seems to work: Edit fiddle - JSFiddle[^]

Change the styles:

.page-holder {
  position: relative;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate(0, 0);
}
.page.animate {
  transition: transform 0.6s ease-in;
}
.page.left {
  transform: translate(-100%, 0);
}
.page.right {
  transform: translate(100%, 0);
}

Add the class right to all pages except the first:

container.find('.page:not(:first-child)').addClass('right');

Or you could do this in the markup.

Set the height for the page-holder, since I can't find a way in CSS to make it encompass absolutely-positioned children:

var maxHeight = 0;
var container =

('.page-holder'); container.find('.page').each(function(){ maxHeight = Math.max(maxHeight,

(this).height()); }); container.height(maxHeight);

Change the else block in the currentPageIndex change watcher:

else {
  var allPages = container.find('.page').removeClass('animate left right');

  // The previous page needs to animate:
  allPages.eq(oldVal).addClass('animate');
  
  // As does the new page:
  var newPage = allPages.eq(newVal).addClass('animate');

  // Move all other pages to the correct side:
  newPage.prevAll('.page').addClass('left');
  newPage.nextAll('.page').addClass('right');
}

And now the pages "hop" correctly. :)

这篇关于从第一个div平滑滑动到第三个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！