Question

通过PHP计算步骤并将其添加到会话中以避免在更新或刷新页面时返回到开头，通过以下变量获取值$step

<?php
  session_start();

  if ( !empty($_SESSION['datos_form']['__step__'])) {
    $step = $_SESSION['datos_form']['__step__'];
  } else {
    $step = '1';
  }

?>

我们在jQuery javascript代码中收到变量的值。

show_step(<?= $step; ?>);

这将等于:(对于收到的默认值）

show_step(1);

该流程的每个步骤都是根据从PHP收到的Javascript代码中显示的值显示的。

无需添加如下所示的其他控件：

current = $(this).parent();
next = $(this).parent().next();

我有以下带CSS的简单向导

https://jsfiddle.net/2LL8x1sm/

我需要能够将其改编为ajax javascript代码，以便为其设置动画。

当前代码已经使用一种名为sprite

的技术制作了动画

function animacion(caso){}

我需要的是能够调整流程的动画，并使用(like this one)图标sliding，其中包含类似于下图的进度条：

此动画必须添加到与后面链接一起工作的函数animacion(caso) {}内并继续，在以下代码中添加一个示例：

$( ".test" ).animate({ "left": "-=50px" }, "slow" );

实际上它起作用了，测试类的div通过在每一步中继续修改左侧样式。

如何设置html代码css的流程动画？

＆＃13;

$(function() {
    show_step(<?= $step; ?>);        
});

function animacion(caso){
  //$( ".test" ).animate({ "left": "-=50px" }, "slow" );
};

// function to save the form data and change the step
function show_step(step){
    var data = $( "#form" ).serialize();
    var url = 'saveTemp.php?step=' + step;

    $.ajax({
      type: "POST",
      url: url,
      data: data
    })
    .done(function( resp ) {
        $('.step').css( "display", "none" );
        $('#step'+step).fadeIn("slow");
        //animation of each step
        animacion(step);
    });
};

＆＃13;

.container {
  width: 100%;
  padding-top: 20px;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
}

.progressbar li > * {
  position: relative;
  padding-bottom: 20px;
  display: inline-block;
  font-size: 1.4rem;
  color: #2c3f4c;
  top: -45px;
}

.progressbar li:before {
  content: '';
  width: 12px;
  height: 12px;
  display: block;
  text-align:  center;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #edeff0;
}
  
.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #edeff0;
  top: 4px;
  left: -50%;
  z-index: -1;
}
  
.progressbar li:first-child:after {
  content: none;
}
  
.progressbar li.active {
  color: green;
}
  
.progressbar li.active:before {
  background-color: green;
}
  
.progressbar li.active + li:after {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- <div class="test"></div> -->

<div class="container">
  <ul class="progressbar">
  	<li class="active"><span>Step 1</span></li>
  	<li><span>Step 2</span></li>
  	<li><span>Step 3</span></li>
  </ul>
</div>

<form id="form" action="procesar.php">
  <div id="step1" class="step">
  	<h1>step 1</h1>
  	<a data-ref="#" onclick="show_step(2)">continue</a>
  </div>
  <div id="step2" class="step">
  	<h1>step 2</h1>
  	<a data-ref="#" onclick="show_step(1)">after</a>
    <a data-ref="#" onclick="show_step(3)">continue</a>
  </div>
  <div id="step3" class="step">
  	<h1>step 3</h1>
  	<a data-ref="#" onclick="show_step(2)">after</a>
  	<button>Send</button>
  </div>
</form>

＆＃13;

Answer 1

这正确理解你需要什么吗？

＆＃13;

function animacion(caso) {
    if (!caso) {
        document.getElementsByClassName("progressbar")[0].setAttribute("data-active", "");
    } else {
        document.getElementsByClassName("progressbar")[0].setAttribute("data-active", caso);
    }
    var items = document.getElementsByTagName("li");
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        if (!caso) {
            item.className = "";
        } else if (i < caso) {
            item.className = "active";
        } else {
            item.className = "";
        }
    }
}

setTimeout(function () {
    animacion(1);
}, 1000);
setTimeout(function () {
    animacion(2);
}, 2000);
setTimeout(function () {
    animacion(3);
}, 3000);
setTimeout(function () {
    animacion(2);
}, 4000);
setTimeout(function () {
    animacion(1);
}, 5000);
setTimeout(function () {
    animacion(null);
}, 6000);

＆＃13;

.container {
	width: 100%;
}
.progressbar {
	counter-reset: step;

}
.progressbar li {
	list-style-type: none;
	float: left;
	width: 33.33%;
	position: relative;
	text-align: center;
}
.progressbar li > * {
	position: relative;
	padding-bottom: 20px;
	display: inline-block;
	font-size: 1.4rem;
	color: #2c3f4c;
	top: -45px;
	/* new code start */
	top: -65px;
	/* new code end */
}
.progressbar li:before {
	content: '';
	width: 12px;
	height: 12px;
	display: block;
	text-align:  center;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #edeff0;
}
.progressbar li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 4px;
	background-color: #edeff0;
	top: 4px;
	left: -50%;
	z-index: -1;
}
.progressbar li:first-child:after {
	content: none;
}
.progressbar li.active {
	color: green;
}
.progressbar li.active:before {
	background-color: green;
	/* new code start */
	-webkit-transition: background 300ms ease;
	transition: background 300ms ease;
	-webkit-transition-delay: 300ms;
	transition-delay: 300ms;
	/* new code end */
}

/* removed code start */
/*
.progressbar li.active + li:after {
	background-color: green;
}
*/
/* removed code end */

/* new code start */
.progressbar {
	position: relative;
	padding: 0;
	margin: 0;
}
.progressbar:after {
	content: "";
	height: 4px;
	left: 16.666%;
	background: green;
	top: 4px;
	position: absolute;
	-webkit-transition: width 300ms ease;
	transition: width 300ms ease;
}
.progressbar[data-active="1"]:after {
	width: 0;
}
.progressbar[data-active="2"]:after {
	width: 33%;
}
.progressbar[data-active="3"]:after {
	width: 66%;
}
.progressbar[data-active=""]:before {
	opacity: 0;
}
.progressbar:not([data-active=""]):before {
	opacity: 1;
	-webkit-transition: left 300ms ease, opacity 300ms ease;
	transition: left 300ms ease, opacity 300ms ease;
}
.progressbar[data-active="1"]:before {
	left: 16.666%;
}
.progressbar[data-active="2"]:before {
	left: 50%;
}
.progressbar[data-active="3"]:before {
	left: 83.333%;
}
.progressbar:before {
	content: "";
	height: 16px;
	width: 16px;
	margin-top: -24px;
	margin-left: -8px;
	left: 16.666%;
	background: khaki;
	top: 4px;
	position: absolute;
	-webkit-transition: left 300ms ease;
	transition: left 300ms ease;
}
/* new code end */

＆＃13;

<div class="container">
    <br><br><br><br><br><br>
    <ul class="progressbar" data-active="">
        <li><span>Step 1</span></li>
        <li><span>Step 2</span></li>
        <li><span>Step 3</span></li>
    </ul>
</div>

＆＃13;

标记和样式有微小的变化。 Rectange表示可以插入图标的块。

如何使用ajax jquery和php为多表单进程设置动画？

1 个答案: