I'm want to disable all css transitions using JavaScript. I added transition: none to the body (via JavaScript), but the elements in the body still have a transition.
Of course I can loop through all elements, and add transition = 'none';, but I'm sure there's a better way of temporary disabling the css transition of all elements. Here's a sample code:
JSFiddle
var sample = document.getElementById('sample');
sample.addEventListener('click', function() {
if (document.body.style.transition === 'none') {
document.body.style.transition = '';
} else {
document.body.style.transition = 'none';
}
})
#sample {
width: 200px;
height: 100px;
background: lawngreen;
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
<div id="sample">Hover over me to move
<br />Click to disable transition</div>
Add a new class name to the body or parent tag. Set transitions with the new parent selector .animated #sample:
<body class="animated">
<div id="sample"></div>
</body>
... and the styles:
#sample {
width: 200px;
height: 100px;
background: lawngreen;
}
.animated #sample {
transition: transform 500ms ease;
}
.animated #sample:hover {
transform: translateX(50px);
}
To disable animations of all children just remove the .animated class from the body or parent tag.
Modified fiddle: https://jsfiddle.net/xjxauu0h/1/
you'll want to use a class on body so you can turn it on and off.
var sample = document.getElementById('sample');
document.body.classList.add('transitioner');
sample.addEventListener('click', function() {
if (document.body.classList && document.body.classList.length) {
document.body.classList.remove('transitioner');
} else {
document.body.classList.add('transitioner');
}
console.log(document.body.classList);
})
#sample {
width: 200px;
height: 100px;
background: lawngreen;
}
.transitioner *{
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
<div id="sample">Hover over me to move
<br />Click to disable transition</div>
var sample = $('#sample');
var body = $('body');
sample.click(function() {
body.toggleClass('notransition notransform');
});
#sample {
width: 200px;
height: 100px;
background: lawngreen;
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
.notransition.notransform #sample {
background: HotPink;
}
.notransition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.notransform * {
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">Hover over me to move
<br />Click to disable transition</div>
Related
The following setup (see below) animates the div on page load using jQuery, but fails in vanilla JavaScript, in that it gives me the animated state without the animation. I don't wand to use keyframes or a delay, and nothing I tried in JS worked.
Here's the working version, with jQuery:
jQuery(function($) {
$(document).ready(function() {
$("#new-selector").addClass("animated-selector");
});
});
#new-selector {
background: #3a88fe;
width: 50px;
height: 50px;
transition: transform 500ms ease;
}
#new-selector.animated-selector {
background: orange;
transform: translate(75px, 20px) scale(1.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="new-selector"></div>
Here's the problematic version, with vanilla JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('new-selector').classList.add('animated-selector');
});
#new-selector {
background: #3a88fe;
width: 50px;
height: 50px;
transition: transform 500ms ease;
}
#new-selector.animated-selector {
background: orange;
transform: translate(75px, 20px) scale(1.5);
}
<div id="new-selector"></div>
For the vanilla JS version you might need to wait for the browser to give you the next animation frame using requestAnimationFrame:
document.addEventListener('DOMContentLoaded', function() {
requestAnimationFrame(() => document.getElementById('new-selector').classList.add('animated-selector'))
});
#new-selector {
background: #3a88fe;
width: 50px;
height: 50px;
transition: transform 500ms ease;
}
#new-selector.animated-selector {
background: orange;
transform: translate(75px, 20px) scale(1.5);
}
<div id="new-selector"></div>
so I have a simple side bar that I want to slide in and out using css animation, now the slide animation in is working the problem that I am facing is making the animation for the slideout to work.
Can I please get help on that..
Html(Sidebar)
<div class="SideBarMenu" id="SideBarMenu">
<div class="sidebar-menu-header">
<h2 class="nav-bleft-companyname">
Sofast<span class="nav-bleft-periodmark">Cart.</span>
</h2>
</div>
<hr />
<h4 class="sidebar-menuLink">MenuItem1</h4>
<h4 class="sidebar-menuLink">MenuItem2</h4>
<h4 class="sidebar-menuLink">MenuItem3</h4>
<h4 class="sidebar-menuLink">MenuItem4</h4>
<h4 class="sidebar-menuLink">MenuItem5</h4>
</div>
JS Function triggered to toggle menu
const OpenMenu = () => {
const menu = document.getElementById("SideBarMenu");
if (menu.style.display === "block") {
menu.classList.add("sidebar-closed");
menu.style.animation = "slideOut 0.4s backwards";
menu.style.display = "none";
} else {
menu.style.display = "block";
menu.style.animation = "slideIn 0.4s forwards";
menu.classList.remove("sidebar-closed");
}
};
Side Bar css
.SideBarMenu {
top: 0% !important;
z-index: 999;
position: fixed;
background-color: #333333;
height: 100vh;
color: white;
width: 20%;
transform: translateX(-350px);
padding: 2rem;
}
.sidebar-menuLink {
margin-top: 1rem;
}
#keyframes slideIn {
100% {
transform: translateX(0px);
}
}
#keyframes slideOut {
100% {
transform: translateX(-350px);
}
}
You can use css transition to achieve that. I also advise you to put all your styles in css classes, you don't need to apply the styles in javascript.
const animate = () => {
const elem = document.getElementById("my-elem");
if (!elem.classList.contains('elem-out')) {
elem.classList.add("elem-out");
} else {
elem.classList.remove("elem-out");
}
};
const btn = document.getElementById("my-btn");
btn.addEventListener("click", animate)
.elem {
width: 300px;
height: 50px;
background-color: red;
margin-bottom: 10px;
}
.elem:not(.elem-out) {
transition: transform 0.4s ease-in;
transform: translateX(0px);
}
.elem-out {
transition: transform 0.4s ease-out;
transform: translateX(-350px);
}
<div id="my-elem" class="elem"></div>
<button id="my-btn">toggle animate</button>
Do not change the display property, the transition will brake. There's no transition for propperty like display, if you want a fadeIn / fadeOut effect too, you can put a transition on opacity property
I have a button. I want to add to this button class: space and after this class was added and is visible in browser I want to add another class: spinner
I have tried with:
$("button").on("click", function(){
$(this).addClass("space");
$(this).addClass("spinner");
}
CSS:
.spacer{
transition: .3s !important;
padding-right: 3.1rem !important;
}
.spinner{
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #3498db;
width: 10px;
height: 10px;
animation: spin 2s linear infinite;
}
But it, obviously, doesn't work. Why?
Can a class be added to an element only after a class was added and has made its effect?
you could add the second class with a short timeout.this gives you also the possibility to add some animations if needed.
window.setTimeout(function() {
button.addClass("spinner");
},500);
promises will work to
You can add event listener to check if the transition is completed.
Consider the code below:
var el = document.getElementById('someelement');
debugger;
function transitionCallback(){
var t;
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
/* Listen for transition */
var transitionEvent = transitionCallback();
transitionEvent && el.addEventListener(transitionEvent, function() {
console.log('Transition complete.');
});
/*transition example is from w3schools*/
#someelement {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
}
#someelement:hover {
width: 300px;
}
<html>
<head>
</head>
<body>
<div id="someelement"></div>
</body>
</html>
Use animation-delay to set a delay before it starts to run. I set it to a big number just so you can see the delay.
document.querySelector('button')
.addEventListener('click', event => {
event.preventDefault()
const classList = event.target.classList
classList.toggle('spacer')
classList.toggle('spinner')
})
.spacer{
transition: .3s !important;
padding-right: 3.1rem !important;
}
.spinner{
border: 5px solid #f3f3f3;
border-radius: 50%;
border-top: 5px solid #3498db;
width: 10px;
height: 10px;
animation: spin 2s linear infinite;
animation-delay: 2s;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<button></button>
Please have a look at the animation below. While you may see that it works on PC, there must be something wrong since it does not work on mobile. For example on Android, the image is zoomed and with opacity 1 from the very beginning. I assume that the transition has been made but the duration was 0s. Thank you for your help.
$(document).ready(function(){
$(".photo").css(" -moz-transform", "scale(1.2)");
$(".photo").css("-webkit-transform", "scale(1.2)");
$(".photo").css("-o-transform", "scale(1.2)");
$(".photo").css("opacity", "1");
$(".photo").css("transform", "scale(1.2)");
});
.photo {
display: inline-block;
vertical-align:top;
max-width:100%;
opacity: 0.1;
-moz-transition: transform 40s, opacity 6s;
-webkit-transition: transform 40s, opacity 6s;
transition: transform 40s, opacity 6s;
}
.photoDiv {
display: inline-block;
background-color: #f1f1f1;
width: 100%;
position: relative;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="photoDiv">
<img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>
I think it's cleaner to remove the CSS from JS. Also jQuery is redundant and way too big for what you are trying to do here. Also make sure to add the JS at the end of the body. This way you are sure the content is loaded before JS will even be loaded.
window.addEventListener('load', function() {
var photos = document.getElementsByClassName('photo');
if( photos )
{
for( var i = 0; i < photos.length; i++ )
{
var photo = photos[i];
photo.classList.add('active');
}
}
});
.photo {
display: inline-block;
vertical-align:top;
max-width:100%;
opacity: 0.1;
/*ease-in-out is the animation, 2s is the delay/ pause*/
transition: transform 40s ease-in-out 2s, opacity 6s ease-in-out 2s;
transform: scale(1);
}
.active {
opacity: 1;
transform: scale(1.2);
}
.photoDiv {
display: inline-block;
background-color: #f1f1f1;
width: 100%;
position: relative;
overflow: hidden;
}
<div class="photoDiv">
<img class="photo" src="https://img-aws.ehowcdn.com/877x500p/s3-us-west-1.amazonaws.com/contentlab.studiod/getty/f24b4a7bf9f24d1ba5f899339e6949f3">
</div>
I want that whenever I click on the div, it first translate, then rotate and, finally scale. Further, I want to reverse it back in the same way when I click again
I have the following code:
$(() => {
$('div').on('click', () => {
$('div').toggleClass('clicked');
});
});
div.normal {
height: 20px;
width: 100px;
background: black;
transition: 2s all;
}
div.clicked {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>
As you can see, all the transformations are occurring at the same time. But, I want them to occur separately. How do I achieve this?
Thanks in advance!
Decompose your animation using keyframes. Here is a minimally edited version of your code:
var $el = $('#to-animate')
var firstClick = true
$el.click(() => {
$el.toggleClass('clicked')
if (!firstClick) {
$el.toggleClass('unclicked')
}
firstClick = false
})
div.normal {
height: 20px;
width: 100px;
background: black;
}
div.clicked {
animation: transforms 2s forwards;
}
div.unclicked {
animation: transforms-2 2s reverse;
}
#keyframes transforms {
33% {
transform: translate(100px, 100px);
}
66% {
transform: translate(100px, 100px) rotate(45deg);
}
100% {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
}
#keyframes transforms-2 {
33% {
transform: translate(100px, 100px);
}
66% {
transform: translate(100px, 100px) rotate(45deg);
}
100% {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="to-animate" class='normal'></div>
Edit updated to include ability to reverse the animation (making the code edit less minimal)
An idea is to rely on other properties to achieve the same effect and be able to apply different transition
$(() => {
$('div').on('click', () => {
$('div').toggleClass('clicked');
});
});
div.normal {
height: calc(20px * var(--s,1));
width: calc(100px * var(--s,1));
background: black;
position:relative;
top:0;
left:0;
transition: 2s top 4s,2s left 4s,2s width 2s,2s height 2s,2s transform;
}
div.clicked {
top:100px;
left:100px;
--s:2;
transform:rotate(45deg);
transition: 2s top,2s left,2s width 2s,2s height 2s,2s transform 4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>