Develop Reference

CSS Transformation causing scroll back/flash

Not completely sure how to explain what's going on. I'm trying to do a transformation on my search bar after it's submitted. The CSS and HTML are pretty large so I'm linking to CodePen to see in action, but I'll post the JS/CSS here as well.
I'd like to do something 'fancy' with the search bar, while the results pop up on the same screen so I thought 'transitions'.
CSS
.postSearch{
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
HTML Form
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
JS
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
There is a lot more to this page in production which is why some of the IDs etc don't make sure. I feel like using 'toggleClass' is a better idea for the myForm/postponed swap also. (I do this so hitting 'Go' again doesn't re-submit the form.
The codepen is located here - If you notice when you hit 'go' you'll see a scroll bar periodically pop up. On smaller resolutions it happens, on 4K it happens. On the website it actually is causing the background image to 'shake' and snap around.
I'm not too familiar with transitions, but I followed the documents pretty specifically. I'll end up inverting it to get the search bar to go back since it kind of 'snaps' back right now. Would appreciate any advice.
Thanks.

It is because of the component is going out from document. Try by adding overflow: hidden to it's parent container. Please try this and let me know if this is helpful for you.
function updateTransition() {
var el = document.querySelector("div.revolver");
if (el) {
$('#myForm').addClass('postponed');
$('#myForm').removeClass('myForm');
el.className = "postSearch";
} else {
$('#myForm').addClass('myForm');
$('#myForm').removeClass('postponed');
el = document.querySelector("div.postSearch");
el.className = "revolver";
}
};
html,
body {
position: relative;
height: 100%;
margin: 0;
/* temporary class */
}
.overflow-hidden {
overflow: hidden;
position: relative;
min-height: 100%;
}
.postSearch {
-webkit-transition: all 3s ease;
-webkit-transform: rotate(1440deg);
-moz-transition: all 3s ease;
-moz-transform: rotate(1440deg);
margin-left: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden">
<div class="revolver">
<form id="myForm">
<p class="inp-wrap search-wrap">
<label for="charName" class="search-label grid-25">Find</label>
<input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
</p>
<p class="inp-wrap cat-wrap">
<label for="servers" class="grid-20">on</label>
<select name="servers" id="servers" class="grid-80">
<option>Thrall</option>
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
<span class="search-icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</span> GO!
</button>
</p>
</form>
</div>
</div>

Scroll occurs because while form is spinning it goes out parent.
One possible solution is to add overflow: hidden for the time of animation.
body.transitionActive{
overflow: hidden;
}
js
[...]
$('#myForm').addClass('postponed');
$('body').addClass('transitionActive');
setTimeout(function(){
$('body').removeClass('transitionActive');
}, 3000);
$('#myForm').removeClass('myForm');
[...]
See how it works here: http://codepen.io/anon/pen/ALNLak

Animation. Expand div hight without setting directli it's height (angular app)

Here is my code. http://jsfiddle.net/anastsiacrs/Lt7aP/1639/
[Please, run example in jsfiddle, stackoverflow's code does not run]
function XController($scope) {
$scope.model={isHidden:true};
}
.open-div{
background-color:red;
//height:260px;
}
.hidden-div{
background-color:green;
//height:60px;
}
.transformable {
-webkit-transition: 3000ms linear;
-moz-transition: 3000ms linear;
-o-transition: 3000ms linear;
-ms-transition: 3000ms linear;
transition: 3000ms linear;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
<p>{{isHidden}} </p>
<div ng-hide="model.isHidden" >
<div>Hello XXX</div>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
</div>
</div>
</div>
As you can see, without explicit height animation doesn't apply for this property. What is the possible way to solve this issue. May be there are some library or link, that will help me.
If height is directly setted to element, there is another one issue wiht div content. It is apper before div is fully expanded.
some tips will be very pleased

Have you tried changing the CSSheight to min-height? If the hidden div is bigger than the minimum height it will still expand. Should solve your issue.

Bootstrap collapse.js can be used here.
http://v4-alpha.getbootstrap.com/components/collapse/

using animate.css library with jquery mobile to achieve page transitions

Hello folks at Stack Overflow from all over the world! hope you´re all doing great! I just have one inquiry today. I just found out about an awesome css3 library called animate.css http://daneden.github.io/animate.css/ which I am trying to implement with jquery mobile to custome my apps page transitions. I'm trying to go from one page to another with an animate.css class applied to the page div but after the fancy transition occured the page remains on same page and does not reach the targeted page. If anyone out there has any clue on how to achieve this, please let me know. Thanks Here the code:
CSS:
<link href="./css/animate.css" rel="stylesheet" />
Javascript:
<script language="javascript">
$(function() {
$("a#home").click(function() {
animate(".box-a", 'rotateOutDownRight');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
HTML:
<!------- HOME PAGE ---------------------------------------->
<div data-role="page" id="home" data-theme="c" class="box-a animated"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p><a id="home" href="#pagina2">Box A will flash, click here!</a></p>
<a id="home" href="#pagina2" data-role="button">PAGE 2 W/ANIMATION.CSS</a>
PAGE 2 W/O ANIMATION.CSS
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
<!----- PAGE 2 ----------------------->
<div data-role="page" id="pagina2" data-theme="c"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p>PAGE 2</p>
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
URL: see an example here: http://apps.alfonsopolanco.com

jQM allows you to define custom transition ( http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html ). Using animate.css for this is no problem.
Add 2 css rules that reference the desired transition from animate.css:
.customRotate.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
}
.customRotate.out {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
}
Then simply set the data-transition attribute on the anchor tag to the name of your new transition:
<a id="home" href="#pagina2" data-role="button" data-transition="customRotate">PAGE 2 W/ANIMATION.CSS</a>
Here is a DEMO
UPDATE: To control the speed of the transition:
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 750ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 750ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 555ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 555;
}

Bootstrap collapse vertical toggle switch

$('#demo').on('hidden', function () {
$('#divbody').removeClass('span4').addClass('span8');
});
When the button is clicked: the demo div collapses vertically (i.e. width = 0) which works fine. But I want to then increase the divbody div to fill the page i.e. span8. The JS code is there but I want to do it animation like when the demo div collapses.

Hopefully this should help you get an idea, I did not have a whole lot to go off of on your fiddle. But this should get you started.
jQuery
$('#hideBtn').click(function(){
$('#divbody').toggleClass('span4');
$('#divbody').toggleClass('span8');
$(this).parent().toggleClass('span2');
$(this).parent().toggleClass('span1');
});
CSS
#divbody {
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<button role="button" id="hideBtn" class="btn-danger" data-toggle="collapse" data-target="#demo"> Hide </button>
<div id="demo" class="collapse in width">
<div style="width: 400px;">
<p> This should collapse vertical (by width)</p>
</div>
</div>
</div>
<div id="divbody" class="span4">
Table comes here. This is the main body. Span should increase from 4 to 8 when div demo is collapsed. test test test test test test test test test test
</div>
</div>
</div>
Example
http://www.bootply.com/90126
Another example with the button below instead of to the side..
http://www.bootply.com/90128

JavaScript style.height shaking unintentionally

http://stadskoll.nu/restaurang.php
If you press the string of text called Visa/dölj mer information which is in a grey font, you will see that the effect occurring is shaking. This is not intentional and I cant figure out what's wrong.
To clarify, I want to know what's causing this "shaky" effect and be able to remove it.
HTML :
<!--VAL1-->
<div id="val1">
<div id="information">
<namn>
</namn>
<br>
<a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
<br>
<div id="star2" style="background-position:0 -0px">
<div id="stars1">
<div class="first" onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
<div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
<div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
<div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
<div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
</div>
</div>
<div id="txt"></div>
<br>
<br>
<information></information>
</div>
<div id="bilder">
<img src="" />
<br/>
<img src="http://stadskoll.nu/bilder/karta.jpg" />
</div>
</div>
CSS :
#val1 {
width:83%;
height:75px;
border-top:1px;
border-top-style:groove;
margin-left:40px;
overflow:hidden;
padding-top:10px;
padding-left:20px;
-webkit-transition: all 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
-o-transition: all 0.5s ease-in-out; /* Opera */
}
JavaScript :
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>

The issue appears to be with the display:inline on the maincontentbox.
If you add vertical-align:top it will disappear.
What I believe is happening is that, since by default it is aligned to the baseline, the browser is making the div taller. Since the div is taller it has to resize the parent container and then move the div to the bottom of the line.