How do I make fix this code so the two element first becomes no longer hidden and then moves however much right smoothly using the transition. It works when the element doesn't begin hidden, but when it is, it just jumps to the end spot. How do I make this work without taking out hidden and reducing the elements width to zero.? Thanks.
var one = document.getElementById('one');
var two = document.getElementById('two');
function myFunct() {
two.style.display = 'flex';
two.style.right = '70%';
}
#one {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid red;
}
#two {
position: absolute;
display: none;
min-width: 5px;
height: 100%;
transition: 1.5s;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
background-color: green;
right: 0px;
}
<div id = 'one' onclick = 'myFunct()'>
<div id = 'two'></div>
</div>
Use opacity: 0 first instead of display: none and using translateX instead of right will be better.
I also recommend AnimeJS since it makes animations and transitions a lot easier if you are using a bunch of them.
Try manipulating the visibility property instead of display:
function myFunct() {
two.style.visibility = 'visible';
two.style.right = '70%';
}
#two {
visibility: hidden;
display: flex;
...
}
Related
I am making a memory game for school.
My issue right now is, you can spam click everything and everything will show.
whenever you have the wrong pair the cards make the class "red" and they turn red in the css code. But you're still able to click the other cards and a few turn back to normal again after 600ms, some just stay and don't turn back.
is it possible to use an if/else condition for css? If there are "red" cards, the pointer event for normal cards are none. You can play the game here and test the issue yourself: https://memory-20.815374.repl.co
Fixing it without If/else is fine too. Using if/else is just the first thing that comes in my head.
here is the code for CSS:
.card.clicked {
background-color: orange;
pointer-events: none;
}
.card.checked {
background-color: lightgreen;
visibility: hidden;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.card.clicked img,
.card.checked img {
opacity: 1;
}
.card.red {
background-color: #f15f5f;
}
.card {
height: 120px;
width: 100px;
background-color: #ff5cbb;
border-radius: 10px;
display: grid;
place-items: center;
cursor: pointer;
transition: 0.3s all ease;
}
Here is the JavaScript code:
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("red");
incorrectCards[1].classList.add("red");
setTimeout(() => {
incorrectCards[0].classList.remove("red");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("red");
incorrectCards[1].classList.remove("clicked");
}, 600);
I am trying to perform a transition (reducing or extending the height of a DIV). I would like to know how to go about altering a specific property (in this case 'height') associated with a specific class involved in the transition before invoking the transition by changing the CSS classname associated with the element using javascript?
So in the example below, I would like to change the 'height' property of '. sboxopen' from 130px to 360px. Then invoking the transition by changing the element's class name - > Object.className = 'sboxopen';
CSS classes:
.sbox{
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
}
.sboxopen{
height: 130px;
transition: height 1s ease-out;
overflow: hidden;
}
TRANSISTION USING JAVASCRIPT:
Object.className = 'sbox';
or
Object.className = 'sboxopen';
If I cannot change the property of the classes, how do I go about creating a new CSS class dynamically using javascript so that I can incorporate the desired 'height' property for my desired transition?
I don't know what triggers your animation, but let's say it's a click on each of the .sbox elements.
As you can't change the CSS, you can instead use the script to add an inline style height using .style.height.
Here is a snippet:
var sboxes = document.querySelectorAll(".sbox");
sboxes.forEach(function(box, index){
box.onclick = function(){
box.style.height = "360px";
box.className = 'sboxopen';
}
})
.sbox {
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
border: 8px solid gray; /* Added for better visibility */
}
.sboxopen {
height: 130px;
transition: height 1s ease-out;
overflow: hidden;
border: 8px solid gray; /* Added for better visibility */
}
<div class='sbox'>Box 1</div>
<br>
<div class='sbox'>Box 2</div>
<br>
<div class='sbox'>Box 3</div>
⋅
⋅
⋅
Then, we can imagine using custom heights from a custom attribute, for each of the .sbox:
var sboxes = document.querySelectorAll(".sbox");
sboxes.forEach(function(box, index){
box.onclick = function(){
box.style.height = box.getAttribute('myHeight');
box.className = 'sboxopen';
}
})
.sbox {
height: 0px;
transition: height 1s ease-out;
overflow: hidden;
border: 8px solid gray; /* Added for better visibility */
}
.sboxopen {
height: 130px;
transition: height 1s ease-out;
overflow: hidden;
border: 8px solid gray; /* Added for better visibility */
}
<div class='sbox' myHeight='30px'>Box 1</div>
<br>
<div class='sbox' myHeight='60px'>Box 2</div>
<br>
<div class='sbox' myHeight='360px'>Box 3</div>
Feel free to comment if any.
Hope it helps.
I want to trigger a opacity transition. If an element is hovered by the cursor, the cursor shall fade out, change its background-image and then fade in again. I wanted to achieve that by adding and removing a css class. It's not working, what is wrong?
js fiddle
HTML
<div class="wrapper">
<div class="cursor">
</div>
<div id="grey">
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 60px;
cursor: none;
}
#grey {
width: 100px;
height: 100px;
background: grey;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s; /* Safari */
transition: opacity .3s;
}
.red {
background: red;
opacity: 1;
}
.green {
background: green;
opacity: 1;
}
JS
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
$('.cursor').removeClass('green').addClass('red');
}else{
$('.cursor').removeClass('red').addClass('green');
}
});
DEMO HERE
Ok, here you go. You need to keep track of 2 things here which you already achieved partially and also wait for fadeOut to complete and add a callback for adding and removing respective class
Whether cursor has entered element
Whether cursor has left element
Below is how you could actually do it.
var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
if(!entered)
{
//just to do it once and not on every mousemove you need to check here whether
//it has already entered and moving inside the element
entered=true;
left=false;//to check the vice versa operation
$('.cursor').fadeOut('fast',function(){
//callback function after fadeOut completes
$(this).removeClass('green').addClass('red');
}).fadeIn('fast');
}
}else{
if(!left)
{
left=true;
entered=false;
//same goes here too
$('.cursor').fadeOut('fast',function(){
$(this).removeClass('red').addClass('green');
}).fadeIn('fast');
}
}
});
you have to change background color , not opacity ( opacity is always 1 )
CSS
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: background-color .3s; /* Safari */
transition: background-color .3s ;
}
.red {
background-color: red;
opacity: 1;
}
.green {
background-color: green;
opacity: 1;
}
So you said your question is wrong, it is "no, I just made it easier for hier, in reality it is an background image" - so you transition between two background-images.
Here is how you do it:
You can not do it with CSS transition in ONE element/div
You will have to make two divs wich one background each
Increase the zIndex of the div you want to fade out in by one
Fade out div, while the new div stays at opacity: 1
I need to add a fade effect on my javascript function
Javascript
<script type="text/javascript">
window.onload=function() {
loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
closebtn = document.getElementById('closelogin');
loginBtn.onclick=function(){
fader.style.display = "block";
login_box.style.display = "block";
}
closebtn.onclick=function() {
fader.style.display = "none";
login_box.style.display = "none";
}
}
</script>
HTML
<div id="login_fader"> </div>
<div id="login_box">
<table class="table-login">
<th>Login or Register</th>
<th><a id="closelogin">X</a></th>
<tr>
<td>Login</td>
<td>Register</td>
</tr>
</table>
</div>
CSS
<style type="text/css">
#loginBtn {
float: right;
margin-top: -6%;
cursor:pointer;
}
#login_fader {
background: black;
opacity: .5;
-moz-opacity: .5;
-filter: alpha(opacity=50);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 5;
display: none;
}
#login_box {
width: 320px;
height: 200px;
border: 1px white solid:
background: #5a5a5a;
position: fixed;
top: 25%;
left: 35%;
z-index: 10;
display: none;
}
.table-login {
background: #FFF;
border-radius: 8px;
box-shadow: 0 0 5px 2px;
opacity: 0.95;
}
#closelogin {
float:right;
cursor:pointer;
}
</style>
Js fiddle
http://jsfiddle.net/U3n4j/
I have tried using the transition properties from css3 and tried applying both to login_box and login_fader.
I found some functions on the net but don't know how to link them to my already made function and i was thinking if there are any properties directly that i can link them to my function.
Proper way to fade in a static box in css3 and js 1.7 ++
This is a example using only webkit and modern javascripts classList.add
but you can add the other prefixes.-moz,-ms,-o
in this example i show only the animation.
css
.box{
width:100%;
height:100%;
position:fixed;
left:0;top:-100%;/*notice TOP -100%*/
opacity:0;
-webkit-transition:opacity 700ms ease,top 0 linear 700ms;/*notice TOP delay*/
background-color:rgba(0,0,0,0.7);
}
.box.active{
-webkit-transition:opacity 700ms ease,top 0 linear 0;
/*top transition not needed but could help to understand*/
top:0;
opacity:1;
}
js
function show(){
box.classList.add('active');
}
function hide(){
box.classList.remove('active');
}
var box=document.getElementsByClassName('box')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);
DEMO
http://jsfiddle.net/RAu8Q/ not working anymore
http://jsfiddle.net/RAu8Q/17/ new syntax 10-2015
if you have any questions just ask.
I can't tell exactly what effect you're trying to achieve, but if you're going to use CSS transitions, then you need to be transitioning between numerical properties. I.e., you can't expect a fade to occur simply by transitioning from display:block to display:none. You'd want to use opacity instead.
First of all, don't try to use css transitions in conjunction with display property, that won't work! Instead, try transitioning other properties. Let's take opacity for instance (we'll simulate display: none/block functionality by setting opacity to 0/1)
Secondly, set the start value for opacity to 0 on the desired HTML element (the one you'd like to animate). Specify which property to animate (opacity in our case):
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transtion: opacity 1s;
When the login button is clicked, set opacity to 1:
loginBtn.onclick=function() {
fader.style.opacity = 1;
login_box.style.opacity = 1;
}
When the close button is clicked, set opacity back to 0:
closebtn.onclick=function() {
fader.style.opacity = 0;
login_box.style.opacity = 0;
}
Link to fiddle.
I believe that what you want to do needs css animations. So just create an animation class that fades out the target element and apply it after the user logs in.
#keyframes fadeOut {
from: {
opacity:1;
},
to: {
opacity:0;
}
}
then use apply it on the class
.fadeOut {
animation:fadeOut 0.25s forwards;
}
EXAMPLE
http://jsfiddle.net/zgPrc/
In some DVD/Video players, the controls for play/pause/volume/etc are overlaid on top of the video itself in a box. The controls fade in when you move the mouse, and then, after some delay, fades back out (so you can enjoy the video again).
I am wondering -- how to create this effect using CSS? Is there a way to reset the fade-out timer on events other than body mouse move?
Let's say we have the following HTML template:
<div class="player">
<div class="controls">Controls go here</div>
</div>
It is possible if you use CSS transition-delay: http://jsfiddle.net/teddyrised/7sBwA/
.player {
background-color: #333;
position: relative;
width: 100%;
height: 400px;
}
.controls {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
color: #eee;
padding: 1em;
position: absolute;
left: 2em;
right: 2em;
bottom: 2em;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity .5s ease-in-out;
transition-delay: 0;
}
.player:hover .controls {
pointer-events: auto;
opacity: 1;
}
.player:not(:hover) .controls {
transition-delay: .5s;
}
However, if you want better browser support, you should use JS instead.
When using jQuery, you can exploit the .delay() method when using jQuery effects, such as .fadeOut() in our example: http://jsfiddle.net/teddyrised/g7kge/
JS:
$(document).ready(function(){
$(".player .controls").hide();
$(".player").hover(
function(){
// Mouse enters. Fade in controls
$(this).find(".controls").fadeIn();
},
function(){
// Mouse leaves. Delay controls fade out by 1000ms
$(this).find(".controls").delay(1000).fadeOut();
});
});
It is possible to control the fade-out timer using CSS with:
-(prefix)-transition: all <duration> ease-out <delay>;
Take a look at this fiddle.