Develop Reference

Transition issue CSS and JS

I want to setup a animation for the backdrop-filter property. When I use plain CSS it works but when I toggle the class in JS it doesn't work anymore.
I have tried to isolate the problem but I don't understand how to solve it.
MENU HTML
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
CONTACT HTML
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>
CSS
#contact-wrapper{
display: block;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: backdrop-filter 1.5s;
}
#contact-wrapper.hide{
display: none;
backdrop-filter: blur(0px);
transition: backdrop-filter 1.5s;
}
JS
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
I want the backdrop transition working.
Can anyone help me? Thanks!

Answer:
You can't animate the Display property.
You can simulate this by using other properties like opacity, visibility, and adjusting height and/or width. Often used is setting the opacity and height to 0. This causes a similar effect to display: none since it causes the element to effectively remove the space it takes up in the DOM while rendering it invisible. Note You may also need to set padding, width, and margin to 0 if you truly want it to be as minimally existent in the DOM as possible.
You also can't transition just one property like backdrop-filter when some other altered property causes the element to be invisible. why? because it's interpreted by the Browser as "immediately make this element invisible while transitioning the other properties*." Basically it makes the whole operation pointless.
The syntax in your case to add multiple properties to transition is something like this:
transition: prop time, prop time, prop time;
If all altered properties are to be transitioned you can also just use:
transition: all 1.5s;
Example:
NOTE I updated with your menu code. I don't know where the menu is located, but to get it work with the demo code I had to alter the z-index depending on if hide was applied. This is because of the fixed top-left nature of the contact-wrapper. Depending on your markup you may not need to alter this or may need to alter it differently.
function toggleClass(elementId, cssClass){
var element = document.getElementById(elementId);
element.classList.toggle(cssClass);
}
window.onload = function(){
document.getElementById("contact-link").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
document.getElementById("contact-close-button").addEventListener("click", function(){
toggleClass("contact-wrapper", "hide");
});
}
#contact-wrapper{
display: block;
opacity: 1;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0, .75);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 1.5s, margin 1.5s, padding 1.5s, height 1.5s, backdrop-filter 1.5s;
}
#contact-wrapper.hide{
opacity: 0;
height: 0;
padding: 0;
margin: 0;
z-index: -1;
backdrop-filter: blur(0px);
}
<nav id="main-menu">
<ul>
<a href="http://localhost/jorime/">
<li>Work</li>
</a>
<!-- <li>Services</li> -->
<a href="#">
<li id="contact-link">Contact</li>
</a>
</ul>
</nav>
<section id="contact-wrapper" class="hide">
<section id="contact-content">
<section id="contact-close-button">
<button>X</button>
</section>
<section id="contact-header">
<h2>Contact</h2>
<p class="importent">Feel free to leave a message!</p>
</section>
<section id="contact-body">
<form action="">
<input type="text" class="contact-form-field" id="contact-form-name"
placeholder="Enter your name" />
<input type="text" class="contact-form-field" id="contact-form-email"
placeholder="Enter your email" />
<textarea class="contact-form-field" rows="10" id="contact-form-message"
placeholder="Enter your message"></textarea>
<section class="flex-right">
<input id="contact-form-submit" type="submit" value="submit" />
</section>
</form>
</section>
</section>
</section>

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/

jQuery mobile search input in header (overtop/overlay of header) with fiddle

Hi I am currently working on a jQuery mobile project. In the header I have an icon for panel on left, center is a title and right is a search icon.
The search icon currently reveals a search input, which works great. The Input is revealed above header and everything else is pushed down.
My question is how can I adjust this so the search input reveals within the header (like an overlay) as opposed to above the header.
Along with a close button (X) to return to default header?
<body>
<div data-role="page" data-theme='d'>
<div data-display="push" data-role="panel" data-theme="c" id=
"sidebar">
<ul data-icon="false" data-inset="false" data-role="listview">
<li>
<a data-ajax="false" href="index.html"><i class=
'fa fa-home fa-fw'></i>Home</a>
</li>
</ul>
</div>
<div >
<form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform">
<input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id=
"" name="q" placeholder="Search..." type=
"text">
</form>
</div>
<div data-role="header" data-tap-toggle="true" data-theme='b'>
<a data-role="none" href='#sidebar'><img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png"></a>
<h1 class="header-title">Hvac Techpedia</h1>
<a data-role="none" href='#' id="a-search"><img alt="search" id="header-search-icon" src="images/search-icon.png"></a>
Here is a fiddle of the CSS, HTML and JS. Click the search bar on the top right.
http://jsfiddle.net/xstrikax/cj6nc8xa/4/
Been tinkering around but cant seem to figure it out. Adding data-positon="fixed" to header makes the bar (search input) appear below header.
This is somewhat of an example of what I am looking to do:
http://www.style.com/magazine
Using JQM 1.4.5 & Jquery 1.11.1.
Any help or suggestions would be great! Thanks!!!!

You can do this by putting the search form within the header and setting its position to 'absolute'. Then use the top-margin to animate it into view.
<div data-role="header" data-tap-toggle="true" data-theme='b'>
<form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform">
<input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id="" name="q" placeholder="Search..." type="text" /> <a id="closeSearch" href="#" class="ui-btn"><i class="fa fa-times"></i></a>
</form>
<a data-role="none" href='#sidebar'><img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png" /></a>
<h1 class="header-title">test</h1>
<a data-role="none" href='#' id="a-search"><img alt="search" id="header-search-icon" src="images/search-icon.png" /></a>
</div>
#searchform {
position: absolute;
-webkit-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-moz-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-ms-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-o-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-webkit-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
-moz-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
-ms-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
-o-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
z-index: 1000;
height: 44px;
width: 100%;
border: none;
margin-top: -44px;
text-align: center;
}
#searchform.moved {
margin-top: 0px;
}
Updated FIDDLE
You can also simplify your code quite a bit. jQuery mobile provides and event called vclick that handles both clicks and touches. Instead of jQuery's document.ready, use the jQM pagecreate event, and rather than saving the state of the search bar, you can use the toggleClass() method:
$(document).on("pagecreate", "#page1", function(){
$('#a-search, #closeSearch').on('vclick', function (event) {
$('#searchform').toggleClass('moved');
});
});
Note: I have bound the same handler to both the search button and the close button.
Updated FIDDLE-2

Had some mobile issue's. Added return false; to the code. Works much better on mobile devices. stopPropagation(); and prevent default; work good too.

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.