如何在php代码中使用动画css更改表单

所以，我有表单和php代码。我知道如何通过点击按钮更改表单 （顺便说一句，如果按钮在表单中，动画就不起作用。但是如果按钮在表单外部，动画就起作用，但这并不重要。）

像这样

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
    $('#btn_1').click(function(){
    $('#formsss').toggleClass('flipped')
});
</script>

---

要在启动时触发翻转Annation，只需在php代码中的条件中添加以下脚本输出：

if (empty($errors)) {

    session_start();
    $_SESSION['input1'] = $_POST['input1'];
   // SWITCH ON FORM 2 .... HOW ?? , bellow code will switch :)
    echo "<script type='text/javascript'>";
    //the above will be executed after dom load
    echo "$( function(){  $('#formsss').toggleClass('flipped');  })";
    echo "</script>";

}

if（空（$errors））{
会话_start（）；
$_会话['input1']=$_POST['input1']；
//打开表单2…如何切换？？，下面的代码将切换：）
回声“；
//上述操作将在dom加载后执行
echo“$（function（）{$（'#formsss'）.toggleClass（'flipped'）；}”；
回声“；
}

在哪个php条件下，您希望在页面加载中启动动画？@bRIMOs在开始表单1，当我按下按钮1时，该条件被选中，如果为true，则表单动画发生，表单2出现在您的php代码中的哪个条件？只是想知道把条件放在哪里code@bRIMOs其中有一条注释“SWITCH ON FORM 2”，如果您想通过示例2sec在dom加载后使用setTimeout函数创建一个计时器来触发最后一次

#form_2{
-moz-transform: rotateY(-180deg)scale(.1)translateY(-70px);
-webkit-transform: rotateY(-180deg)scale(.1)translateY(-70px);
-o-transform: rotateY(-180deg)scale(.1)translateY(-70px);
transform: rotateY(-180deg)scale(.1)translateY(-70px);
filter: alpha(opacity=0);
opacity: 0;
z-index: 1;
}

#form_2, #form_1 {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: .6s;
-webkit-transition: .6s;
-o-transition: .6s;
transition: 600ms 0ms;
transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
}

#form_2 {
bottom: 20px;
top: 359px;
left: 20px;
right: 20px;
}

#form_2, pre {
position: absolute;
}

/*************************************************/

.flipped#formsss {
overflow: hidden;
}

.flipped #form_1 {
-moz-transform: rotateY(180deg)scale(.7);
-webkit-transform: rotateY(180deg)scale(.7);
-o-transform: rotateY(180deg)scale(.7);
transform: rotateY(180deg)scale(.7);
filter: alpha(opacity=0);
opacity: 0;
}

.flipped #form_2 {
-moz-transform: rotateY(0)scale(1);
-webkit-transform: rotateY(0)scale(1);
-o-transform: rotateY(0)scale(1);
transform: rotateY(0)scale(1);
filter: alpha(opacity=100);
opacity: 1;
z-index: 5;
display: block;
}

if (empty($errors)) {

    session_start();
    $_SESSION['input1'] = $_POST['input1'];
   // SWITCH ON FORM 2 .... HOW ?? , bellow code will switch :)
    echo "<script type='text/javascript'>";
    //the above will be executed after dom load
    echo "$( function(){  $('#formsss').toggleClass('flipped');  })";
    echo "</script>";

}