CSS3 Keyframes not working - javascript

Below is the code -
.startanimation {
height: 100px;
width: 100px;
background: yellow;
-webkit-animation: animate 1s infinite;
}
#-webkit-keyframes animate {
100% {
width: 300px;
height: 300px;
}
}
In the HTML when an element is given a class "startanimation", the animation works. But when the same class is added to another element using "addClass" method, the anmition does not work. Any ideas?

demo - http://jsfiddle.net/d3md7597/1/
$('#start').on('click', function() {
$('#x').addClass('startanimation')
})
$('#stop').on('click', function() {
$('#x').removeClass('startanimation')
})
#x {
background: pink;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
left: 300px;
top: 200px;
}
.startanimation {
height: 100px;
width: 100px;
background: yellow;
-webkit-animation: animate 1s infinite;
}
#-webkit-keyframes animate {
100% {
width: 300px;
height: 300px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>
<br>
<br>
<div id="x"></div>

Related

How to add random position of image in css by the x

I need to make a random position of image ".block" and make the auto reset of function when it flies down. Big thanks to everybody who will help. :)
var player = document.getElementById("player");
var block = document.getElementById("block");
function goleft(argument) {
player.classList.add("animatel");
setTimeout(function() {
player.classList.remove("animatel");
}, 1);
console.log("left");
}
function goright(argument) {
player.classList.add("animater");
console.log("right");
}
body {
background-color: lightblue;
}
.player {
height: 50px;
width: 50px;
position: relative;
top: 450px;
}
.block {
height: 30px;
width: 30px;
position: relative;
top: -50px;
animation: block 1s infinite linear;
}
#game {
width: 500px;
height: 500px;
border: 2px solid black;
}
#keyframes block {
0% {
top: -50;
}
100% {
top: 420;
}
}
#keyframes gor {
0% {
left: 0px;
}
50% {
left: 450px;
}
100% {
left: 0px;
}
}
#keyframes gol {
0% {
right: 450px;
}
50% {
right: 0px;
}
100% {
right: 450px;
}
}
.animater {
animation: gor 1s;
position: relative;
}
.animatel {
animation: gol 1s;
position: relative;
}
<body>
<div id="game">
<div id="player"><img class="player" src="https://via.placeholder.com/50" alt="player box"></div>
<div id="block"><img class="block" src="https://via.placeholder.com/80" alt="bogdan"></div>
<button onclick="goleft()">left</button>
<button onclick="goright()">right</button>
<script type="text/javascript" src="script.js"></script>
</div>
</body>

Loading spinner page on switching pages, in react app

I have this code in my index.html file stackblitz example
<html style="height: 100%;" lang="en" class="perfect-scrollbar-off nav-open">
<head>
<style type="text/css">
.loaderDiv {
background: #117CF7;
width: 100%;
height: 100%;
display: flex;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 200px;
height: 200px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
margin: auto;
}
#supersmartLogo {
width: 150px;
height: 150px;
position: absolute;
left: 45%;
top: 38%;
}
.wrapper {
background: url('./random.svg') center no-repeat;
background-size:50%;
margin: auto;
width: 240px;
height: 240px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="height: 100%;" class="g-sidenav-show g-sidenav-pinned">
<div id="root" style="height: 100%;">
<div class="loaderDiv">
<div class="wrapper">
<div class="loader"></div>
</div>
</div>
</div>
</body>
</html>
it's working fine but I have some problems:
the random.svg shows only for the first reload and when I move between pages the random.svg does not show.
how can I add a shadow under the spinner like this.
can anyone tell me how to fix it please or a better way to achieve this behavior?

Trying To Make A Div Disapear And Reapear OnClick

I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn't make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Try this:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
What are you going to click in order to show the hidden box,since you have made it disappear ?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}
<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x++;
char.classList.remove('show')
char.classList.add('hide')
}else{
x++
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
}
<body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>

CSS transition takes final state immediately

I have a problem starting a CSS transition automatically. Commonly this is done by adding a class to the element being animated. I'm creating my elements dynamically by jQuery. When adding the class immediately after creating the element it takes it's final state immediately without transition. It works only when I add a short delay. Not very nice, can this be done in a different way?
function startbullet() {
var bullet = $('<div class="bullet"></div>');
$("#wrapper").append(bullet);
setTimeout(function () { bullet.addClass("animate"); }, 10);
}
setInterval(startbullet, 2000);
#wrapper {
height: 400px;
position: relative;
}
.bullet {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: #0ff;
border-radius: 10px;
transition-duration: 5s;
transition-timing-function: linear;
}
.bullet.animate {
top: 150px;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
</div> <!-- end wrapper -->
You can use a keyframe animation instead of a transition, like this:
.bullet.animate {
animation-name: bulletIn;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#keyframes bulletIn {
0% { top: 10px; left: 10px; }
100% { top: 150px; left: 400px; }
}
Here is a fiddle for you https://jsfiddle.net/e3hqghv3/
According to this blog post you can call window.getComputedStyle before adding the class to force a redraw, I guess this is done under the hood by jquery's animate function.
function startbullet() {
var bullet = $('<div class="bullet"></div>');
$("#wrapper").append(bullet);
window.getComputedStyle(bullet.get(0)).top;
bullet.addClass("animate");
}
Use jQuery.animate just before adding class
function startbullet() {
var bullet = $('<div class="bullet"></div>');
$("#wrapper").append(bullet);
bullet.animate().addClass("animate");
}
setInterval(startbullet, 2000);
#wrapper {
height: 400px;
position: relative;
}
.bullet {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: #0ff;
border-radius: 10px;
transition-duration: 5s;
transition-timing-function: linear;
}
.bullet.animate {
top: 150px;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
</div>

js Tooltip with delayed mouseout without jQuery

I want to display a tooltip when hovering a div. It should also be displayed when the mouse is hovering the tooltip-div.
Adding an event listener does this job, but if both divs are not overlapping the mouseout calls when the mouse is between them and the tooltip disappears.
Now I want to add a delay for the mouseout which is cancelled when it gets a new mouseover, but I don't know how.
document.getElementById("hoverElem").addEventListener("mouseover", function() {
document.getElementById("displayElem").style.visibility = "visible";
});
document.getElementById("hoverElem").addEventListener("mouseout", function() {
document.getElementById("displayElem").style.visibility = "hidden";
});
#hoverElem {
position: fixed;
height: 100px;
weidth: 200px;
top: 0px;
left: 50%;
background-color: white;
}
#displayElem {
position: fixed;
height: 100px;
weidth: 20px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: hidden;
}
<div id="hoverElem">
A little Div
<div id="displayElem">
Tooltip to show
</div>
</div>
You can intiate a timer in the mouseleave and then clear it in mouseenter of
displayElem like
document.getElementById("hoverElem").addEventListener("mouseenter", function() {
document.getElementById("displayElem").style.visibility = "visible";
});
var hoverTimer;
document.getElementById("hoverElem").addEventListener("mouseleave", function() {
hoverTimer = setTimeout(function() {
document.getElementById("displayElem").style.visibility = "hidden";
}, 500);
});
document.getElementById("displayElem").addEventListener("mouseenter", function() {
clearTimeout(hoverTimer);
});
document.getElementById("displayElem").addEventListener("mouseleave", function() {
this.style.visibility = "hidden";
});
#hoverElem {
position: fixed;
height: 100px;
weidth: 200px;
top: 0px;
left: 50%;
background-color: white;
}
#displayElem {
position: fixed;
height: 100px;
weidth: 20px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: hidden;
}
<div id="hoverElem">
A little Div
<div id="displayElem">
Tooltip to show
</div>
</div>
have you considered using pure CSS instead?
div {
position: fixed;
height: 100px;
width: 200px;
top: 0px;
left: 50%;
background-color: black;
}
div:hover span,
span:hover{
opacity:1;
}
span {
display:block;
opacity:0;
color:orange;
-webkit-transition-delay: .5s;
transition-delay: .5s;
-webkit-transition:opacity 1s ;
transition:opacity 1s ;
position: fixed;
height: 100px;
width: 100px;
top: 150px;
left: 50%;
background-color: yellow;
visibility: visible;
}
<div>
<span>lorem Ipsum</span>
</div>

Categories