How to change form with animation css in php code - php

Question

So, i have forms and php code. I know how change form with button click
(by the way, animation does not work if the button is in the form. But if the button in outside of the form, it works, but it doesn't matter.)
Like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
$('#btn_1').click(function(){
$('#formsss').toggleClass('flipped')
});
</script>
But I do not know how to make the animation turn on through the condition code in php
<div id="formsss">
<div id="form_1">
<h3>Form 1</h3><br>
<form action="" method="POST">
<input name="input1" value="<?php echo $_POST[input1]; ?>">
<br>
<?php
if ( isset($_POST['clicked_btn_1']) )
{
$errors = array();
if (trim($_POST['input1'] == ''))
{
$errors[] = 'Enter text';
}
if (R::count('test', 'input1 = ?', array($_POST['input1'])) > 0)
{
$errors[] = 'Such data is already in the database';
}
if (empty($errors))
{
// SWITCH ON FORM 2 .... HOW?????
session_start();
$_SESSION['input1'] = $_POST['input1'];
}
else
{
echo '<div style="color: red;">'.array_shift($errors).'</div>';
}
}
?>
<button id="btn_1" type="submit" name="clicked_btn_1">Button 1</button>
</form>
</div>
<div id="form_2">
<h3>Form 2</h3><br>
<form action="" method="POST">
<input name="input2" value="<?php echo $_POST[input2]; ?>"><br>
<?php
if ( isset($_POST['clicked_btn_2']) )
{
$errors = array();
if (trim($_POST['input2'] == ''))
{
$errors[] = 'Enter text';
}
if (R::count('test', 'input2 = ?', array($_POST['input2'])) > 0)
{
$errors[] = 'Such data is already in the database';
}
if (empty($errors))
{
// put in a database of two forms
$test = R::dispense('test');
$test->input1 = $_SESSION['input1'];
$test->input2 = $_POST['input2'];
R::store($test);
}
else
{
echo '<div style="color: red;">'.array_shift($errors).'</div>';
}
}
?>
<button id="btn_2" type="submit" name="clicked_btn_2">Button 2</button>
</form>
</div>
</div>
css animation
#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;
}

Answer 1

To trigger the flip annimation on startup just add the bellow script output inside the condition inisde the php code :
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>";
}