CSS animation won't start - javascript

So , I'm doing this car display gallery and I want to use CSS animation.
Using only Firefox for now , and the animation does work when I set the class of the "img" manually for animating to the Left :
HTML:
<img src="test3.jpg" id="Position2" class="Pos2ForLeft">
CSS:
#keyframes Pos2Pos1 {
0% {left: 450; top: 200; width: 400; height:300;}
100% {left: 200; top: 250; width: 200; height:150;}
}
.Pos2ForLeft {
position:absolute; left: 450; top: 200; width: 400; height:300;
animation-name: Pos2Pos1;animation-play-state:running;
animation-duration:1s; animation-fill-mode: forwards;
}
So when I code it manually , the animation runs and then stops , just like I want it to. But when I start with a standart CSS class and want to switch to the one with the animation , nothing happens:
document.getElementById("Position"+i).class = "Pos"+positionsBefore[i]+"ForLeft";
alert(document.getElementById("Position"+i).class)
Please ignore loop and variables.I get alerted that the class is changed to the one I want , but nothing happens. Is there something I need to trigger , what's happening?

An element in JavaScript won't respond to the 'class' property. The correct property is className. So the code would look like this:
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";

if you want to apply css when properties change you should use transitions, link you can see it add the horizTranslate class class to box in the demo

risingtiger was perfectly right! As soon as I made this change not only did it work , but if I rush the next animation it goes to it smoothly(I believe)
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";
Thank you very much wonderful people of the internet!! The solutions some other programmers offered me were scary to say the least...

Related

Animating a Variable Font using Javascript

I'm trying to animate a variable font's axis in Javascript, the axis is called 'FLUX' and it affects a vertical movement in the variable font. I got this part to work in CSS, however I would also like for the second axis, the 'wdth', to correspond to the viewport width. I got this to work in too, but in Javascript.
Now the issue is that both won't work simultaneously. I feel like the way to get this to work is to animate both axes in Javascript, however I cannot figure out how to achieve the 'FLUX' animation in Javascript, only CSS.
I've included a Codepen link to what I've been working on, you can see the Javascript works when the CSS animation is disabled, but with it enabled the CSS seems to override the Javascript.
https://codepen.io/Xenitos/pen/YMbboX
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Test Responsive Width</title>
<body>
<div class="rapper">
<h1 id="title">Flux</h1>
</div>
</body>
</html>
CSS
body{
padding: 0;
margin: 0;
}
.rapper{
padding: 20px;
}
#title{
font-size: 20vw;
color: black;
font-family:"Flux";
text-transform:uppercase;
font-variation-settings: 'wdth' 400;
animation: title infinite;
animation-duration: 15s;
animation-timing-function: ease;
}
#keyframes title {
0% {font-variation-settings:"FLUX" 400 ; }
50% {font-variation-settings:"FLUX" 700 ; }
100% {font-variation-settings:"FLUX" 400 ;}
}
JAVASCRIPT
$( document ).ready(function() {
// Variables
var $window = $(window);
$window.resize(function(){
$('#title').css('fontVariationSettings', "'wdth'" + ($window.width()-450)*100/(1920-450)*4);
})
});
// End temp code for seeing browser width
The expected result is that the viewwidth is linked to the 'wdth' axis of the font and the 'FLUX' axis is animated on a infinitely on a loop.
Is there something I'm missing, or could someone please help me accomplish this entirely in Javascript?
The problem is that font-variation-settings will reset every axis that is not explicitly set.
For instance, in your CSS you set font-variation-settings: 'wdth' 400; and an animation that changes font-variation-settings: "FLUX" 400;. You would expect these would combine, but alas: the animation does not contain a value wdth so that will immediately be reset to its default value once the animation starts.
Likewise with the JavaScript part: CSS and JavaScript are fighting to set font-variation-settings, each undoing the other's settings.
So, at every step it's important to set both the values.
(Tip to get JavaScript and CSS to work together: instead of writing directly to font-variation-settings from JavaScript, write to a CSS variable and use that in the CSS/animation.)
I think you are modifying the wrong variation setting in the #keyframes steps
#keyframes title {
0% {font-variation-settings:"wdth" 400 ; }
50% {font-variation-settings:"wdth" 700 ; }
100% {font-variation-settings:"wdth" 400 ;}
}

Website does not function after I edited content

I recently "made" a website for a friend and it stopped working after I edited some of the content. I don't know why the whole website is broken. It should have images and such...
Please take a look at the website and tell me if anything stands out to why it doesn't work. Thanks!
I have looked at all the html tags and they are all fine.
Your problem is opacity for <article> div is 0:
#main article{
opacity: 0;
}
change to
#main article{
opacity: 1;
}
You have set the opacity to 0 for all ARTICLE elements within your main DIV. I see you have a transition setup for opacity, so I'm assuming you meant to either adjust that opacity value via a script or an animation. Either way, until you implement such, remove the opacity style:
#main article {
...
opacity: 0;
}

FadeIn animation using CSS3 in Javascript

As jQuery.fadeIn is not very smooth on mobile devices I try to use CSS but it doesn't work as expected. How to create a smooth CSS animation using Javascript?
In general this is what I'm trying:
$('div')
.css('opacity', 0) // at first, set it transparent
.css('display', 'block') // make it appear
.css('transition', 'opacity 1000ms linear') // set a transition
.css('opacity', 1); // let it fade in
https://jsfiddle.net/8xa89y04/
EDIT1:
I'm not searching a solution using static CSS classes. The point is: I need to set this dynamically in Javascript code - a replacement for jQuerys fadeIn() for example.
Your logic isn't quite right. Firstly you cannot animate display, so to achieve what you require the element has to always be rendered in the DOM (ie. anything but display: none). Secondly, the transition property should be placed within the CSS styling itself. Finally you can make this much more simple by setting all the rules in CSS classes and just turning the class on/off. Try this:
div {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
opacity: 0;
transition: opacity 1000ms linear;
}
.foo {
opacity: 1;
}
$('div').addClass('foo');
Working example
Use this code.
CSS
div {
width: 100px;
height: 100px;
background-color: black;
transition:opacity 2s;
}
JavaScript
$('div').hover(function(){
$(this).css('opacity','0');
})
Without using CSS properly, you are going the long way about it. You'll need to emulate what you would normally do in CSS, using JavaScript, so you'll be setting all your CSS properties, transitions etc, then applying them with js.
I can't personally see any benefit in doing this. Using actual CSS would be cleaner, more efficient, more maintainable, and simply a plain better solution to what you need.
I think this is what you are looking for.
$('div').css({"display":"block", "opacity":"0"}) //Make div visible and opacity as "0"
$('div').animate({opacity :1}, 1000); //Animate div to opacity "1"
Take a look at this Demo
Found the cause here: CSS transitions do not work when assigned trough JavaScript
To give this attention I need to give the browser some time - or better: a working slot to activate the transition as the time seems not to be a problem.
The following code cuts the process in two by using setTimeout()... and it works!
var div = $('div');
// first process
div
.css('opacity', 0) // initial opacity
.css('display', 'block') // make it appear (but still transparent)
.css('transition', 'opacity 1s linear'); // set up a transition for opacity
// break - start the transition in a new "thread" by using setTimeout()
window.setTimeout(function(){
div.css('opacity', 1); // start fade in
}, 1); // on my desktop browser only 1ms is enough but this
// may depend on the device performance
// maybe we need a bigger timeout on mobile devices

How to change css property to auto, slowly with jQuery?

I have an element set as position:fixed, and bottom: auto; and at some point I do .animate({bottom : '10%'}); it slides smoothly, and then I want to set it back to auto.
If I do .css('bottom','auto'); it slides, but not slowly. So it goes to original position, instantly.
I cannot use .animate(); so how can I do this?
one way could be using .toggleClass(); , but isn't there a way without changing its class ?
I also tried to put a long -webkit-transition time, but it still moves to original position instantly.
And another solution could be to save the initial position in a variable and put it back there, but it does not work for me, because the initial position may, or maynot change in this function.
You can't slowly set something to auto in CSS because once it becomes auto, computations happen to actually assign auto to a value. Since you're doing this in JS anyway, can't you do the computations and set the bottom value to that?
Like this ?
http://jsfiddle.net/a8tQ2/
$('#scr').animate({
bottom: '10%'
}, 1000, function() {
$(this).css('bottom', 'auto');
});
Check out this link http://api.jquery.com/animate/
$('#uiAdminPanelMenu li a').hover( function(){
$(this).animate({'background-color': '#D3E1FA'}, 'slow');
},
function(){
$(this).animate({'background-color': '#F4F4F4'}, 'slow');
});
You can do it in CSS 3 using the transitions support: http://css3.bradshawenterprises.com/
For example:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.
$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/
Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/
try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO
jQuery rules. Check this out.
http://api.jquery.com/resize/
The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)
I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}

Categories