How to control the transform distance with pure JavaScript - javascript

I made this
http://codepen.io/adamchenwei/pen/dOvJNX
and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed.
Is there way I can do that in JavaScript instead and not let css to take charge in this transform distance part?
Cross browser capacity will be great.
SCSS
.myItem {
height: 100px;
width: 501px;
background-color: beige;
animation: to-left-transition 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
HTML
<div class="myItem">
stuff here
</div>

Found out a better way. Soooooo much easier!
I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.
Hope it helps someone else to save couple hours!
http://codepen.io/adamchenwei/pen/xRqYNj
HTML
<div class="myItem">
stuff here
</div>
CSS
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
transition: transform 1s;
}
JS
setTimeout(function() {
document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
console.log('ran');
}, 3000);

EDIT
Below is a method sugguested by Dennis Traub
setTimeout(function() {
console.log('ran');
$("head").append('<style type="text/css"></style>');
var new_stylesheet = $("head").children(':last');
new_stylesheet.html('.myItem{animation: to-left-transition 600ms;}');
}, 3000);
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item" class="myItem">
stuff here
</div>
Answer Before EDIT
Here is a good reference for something similar to what i think you are trying to accomplish.
Based on your dynamic input you could have a function that controls how far the div transitions. Still use your code for transition in the css, but compute how far you want in the jquery or JavaScript. Then call the css transition for how far or long you want to transition.
var boxOne = document.getElementsByClassName('box')[0],
$boxTwo = $('.box:eq(1)');
document.getElementsByClassName('toggleButton')[0].onclick = function() {
if(this.innerHTML === 'Play')
{
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
} else {
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue('margin-left');
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click', function() {
if($(this).html() === 'Play')
{
$(this).html('Pause');
$boxTwo.addClass('horizTranslate');
} else {
$(this).html('Play');
var computedStyle = $boxTwo.css('margin-left');
$boxTwo.removeClass('horizTranslate');
$boxTwo.css('margin-left', computedStyle);
}
});
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
This code was written by Zach Saucier on codepen
This is a good reference for manipulating css with JS: https://css-tricks.com/controlling-css-animations-transitions-javascript/

Related

Fade the same image in and out in one line of CSS automatically

I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.
In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.
Here is what I have so far and it seems like it should work but it's not.
function updateTransition(id) {
var myElement = document.getElementById(id);
var opacity = myElement.style.opacity;
if (opacity==null || opacity=="") opacity = 1;
myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}
var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
background-color:#f3f3f3;
width:100px;
height:100px;
top:40px;
left:40px;
font-family: sans-serif;
position: relative;
animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>
Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
The linked question is not the same as this. As I stated, "single line styles (not style declarations)".
What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.
.fade {
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:fadeinout, slidein;
animation-duration:2s, 1s;
animation-iteration-count:infinite, 1;
animation-direction:alternate, normal;
}
#keyframes fadeinout {
0% {
opacity:0
}
100% {
opacity:100
}
}
#keyframes slidein {
from {
left:-100px;
}
to {
left:0px;
}
}
<div class='fade'>
</div>
You can use animation-iteration-count :
#myElement {
background-color: #f3f3f3;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
font-family: sans-serif;
position: relative;
animation: slidein 2s linear alternate;
animation-iteration-count: infinite;
}
#keyframes slidein {
0% {
opacity: 0;
left: -100px;
}
50% {
opacity: 1;
left: 40px;
}
100% {
opacity: 0;
left: -100px;
}
}
<div id="myElement"></div>

CSS Transition No jQuery; Display then Hide

I built a card game where upon clicking a button the display will either be "Correct!" or "Wrong!" I would like the display to flash and then go away after a couple second but not rearrange the content below it, which in this case is the #winStreak and #longestStreak. I do not want to use jQuery. I have tried adding transitions to CSS, but that does not seem to work.
HTML:
<p id="displayResult"></p>
<p id="winStreak"></p>
<p id="longestStreak"></p>
CSS:
#displayResult {
margin-bottom: 1rem;
transition: 2s ease-in-out;
}
JavaScript:
let foldButton = document.getElementById("foldBTN")
foldButton.addEventListener("click", function(){
if (!table[position].includes(completeHand) && !table[position].includes(completeHand2)) {
document.getElementById("displayResult").innerHTML = "Correct!";
I believe you might use CSS animation:
var result = document.getElementById('displayResult');
result.addEventListener('animationend', function() {
result.classList.remove('flashit');
});
let foldButton = document.getElementById('foldBTN');
foldButton.addEventListener('click', function() {
result.innerHTML = 'Correct!';
result.classList.add('flashit');
});
#displayResult {
font-size:3rem;
height: 1.3em;
margin-bottom: 1rem;
opacity: 0;
}
#displayResult.flashit {
animation: flashit 3s;
}
#keyframes flashit {
5% {opacity:.5}
10% {opacity:1}
15% {opacity:.2}
20% {opacity:1}
40% {opacity:1}
100% {opacity:0}
}
<div id="displayResult"></div>
<button id="foldBTN">CLICK ME</button>

How to trigger CSS animation [duplicate]

This question already has answers here:
Restart animation in CSS3: any better way than removing the element?
(14 answers)
Closed 4 years ago.
I am new to CSS but do know the basics, I want to trigger this animation by using a button. I cannot get it to work.
I used a couple of examples here in Stackoverflow, Jquery, Jscript, but none seem to refer to the #keyframes .
I see more about referring to an animation via classes and removing classes (As I understand this way to restart the animation by removing the element). I tried switching it to classes.
I also then wonder what is best practise?
What is the best way? I thought it would be simple, but I was mistaken.....
I have CSS like so:
#test {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes example {
from { transform: translateY(200px)}
to {height: 200px; background-color: teal;}
}
I am unable to reproduce the issue you described with your CSS.
See sample below:
This answer will be deleted once the question is edited with a mcve.
Please note:
If you question is about best practices, then it'd be off-topic for StackOverflow. See our how to ask page
$(function() {
$("#test-btn").on('click', function() {
$("#test").addClass('animation');
});
});
.animation {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes example {
from {
transform: translateY(200px)
}
to {
height: 200px;
background-color: teal;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test-btn">Animate</button>
<hr/>
<div id="test"></div>
In case you decide to scrap jQuery (or you have to work without it), in order to toggle the CSS animation on your #test element using vanilla JavaScript, separate your animation-related CSS properties into a class:
.animate {
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
Then toggle (add/remove) the .animate class on the #test element:
button.addEventListener('click', function() {
if (isAnimating) {
element.classList.remove('animate');
button.innerHTML = 'Add animation';
} else {
element.classList.add('animate');
button.innerHTML = 'Remove animation';
}
isAnimating = !isAnimating;
});
var element = document.getElementById('test');
var button = document.getElementById('toggle');
var isAnimating = false;
button.addEventListener('click', function() {
if (isAnimating) {
element.classList.remove('animate');
button.innerHTML = 'Add animation';
} else {
element.classList.add('animate');
button.innerHTML = 'Remove animation';
}
isAnimating = !isAnimating;
});
#test {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
}
.animate {
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#toggle {
margin-left: 100px;
}
#keyframes example {
from {
transform: translateY(200px)
}
to {
height: 200px;
background-color: teal;
}
}
<div id="test"></div>
<button id="toggle">Add animation</button>

CSS transition does not work on mobile

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>

start second animation css at position of first animation css

I need to chain two animations in my interface HTML/CSS on user event (here just a click on the document). The first animation start correctly, but when I want to restart the second animation nothing move ?
I know if i remove the .rotaiotn class and with a timeout put other animation class for the element, the second animation start from the first position of the element.
I want to know if exist a solution to start the second animation from the position of the blue ball after the first animation ?
document.addEventListener('click', startAnimation, false);
var isFisrtAnim = false;
function startAnimation(evt) {
var elt = document.querySelector('#blue_ball');
if (!isFisrtAnim) {
elt.setAttribute('class', 'rotation');
} else {
elt.setAttribute('class', 'rotation2');
}
elt.addEventListener("animationend", animationAtEnd, false);
}
function animationAtEnd(evt) {
evt.preventDefault();
isFisrtAnim = !isFisrtAnim;
var elt = evt.target;
// todo here get new position of elt to start another animation
// from the new position after first animation
var new_margin_top = window.getComputedStyle(elt).getPropertyValue('margin-top');
var new_margin_left = window.getComputedStyle(elt).getPropertyValue('margin-left');
console.log('At end new margin-top : ' + new_margin_top + ' - new margin-left : ' + new_margin_left);
// positions are the same of start element ? they are not modify ?
}
#circleNav {
background: rgba(215, 229, 231, 0.4) !important;
margin-top: 100px;
margin-left: 120px;
border-radius: 50%;
width: 335px;
height: 335px;
border: 2px solid #0e6694;
}
img {
max-width: 100%;
}
#blue_ball {
position: absolute;
margin-top: -350px;
margin-left: 165px;
width: 70px;
height: 70px;
border: none;
z-index: 5;
transform-origin: 120px 180px;
}
.rotation {
-webkit-animation: rotation 3s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(240deg);
}
}
.rotation2 {
-webkit-animation: rotation 3s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
#-webkit-keyframes rotation2 {
from {
-webkit-transform: rotate(240deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
<h2>
CLICK ON THE BODY TO START ANIMATION
</h2>
<h4>
When the Blue ball stop click an other time to start second animation, but don't work ?
</h4>
<div id="circleNav"></div>
<div id="blue_ball">
<a href="#">
<img id="btn_menu" src="http://mascaron.net/img/mini_rond_logo.png">
</a>
</div>
smaple code on jsfiddle
thanks in advance.
Just one question, in css:
.rotation2 {
-webkit-animation: rotation 3s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
should not be:
.rotation2 {
-webkit-animation: rotation2 3s linear; /* <----- here, rotation2
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
In js part, why not use elem.classList https://developer.mozilla.org/fr/docs/Web/API/Element/classList to manipulate css class property.

Categories