ease transition on night mode button - javascript

I have a simple JavaScript light/dark mode button but I don't know how to make the transition ease out as well as in. Here's the CSS:
.night-mode {
background-color:#2a2d30;
color:white;
transition:0.4s ease-in-out;
}
Here's the JS and HTML:
<button onclick="night()">night mode</button>
<script>
function night() {
var element = document.body;
element.classList.toggle("night-mode");
}
</script>```

The problem is that you put the transition in the class you're setting/removing, it should be independent from it.
What I would do, if you're just changing the body element is to set up the transition in that as:
body {
transition: color .4s ease-in-out, background-color .4s ease-in-out;
/* set the light colors here if needed */
}
.night-mode {
background-color:#2a2d30;
color:white;
}
Note that in the code above I don't set the transition for every single property but only for those which we actually want to be animated.
Naturally if you want the animation to work not on just the body but specific elements (for example some parts of your UI need to remain the same, also for example link don't inherit the colors) I would create an utility class like:
.with-colors-transition {
transition: color .4s ease-in-out, background-color .4s ease-in-out;
/* set the light colors here if needed */
}
and apply that to all the elements you want to add/remove the night-mode

You can do this if you add another class called dark-mode-off. Then, set the body class to that. In the JS, add a global variable to check if darkmode is on or off. Depending on that, replace the current class with the other one.
var darkmodeon = false;
function night() {
var element = document.body;
if (darkmodeon) {
element.classList.replace("night-mode-on", "night-mode-off");
} else {
element.classList.replace("night-mode-off", "night-mode-on");
}
darkmodeon = !darkmodeon;
}
.night-mode-on {
background-color: #2a2d30;
color: white;
transition: 0.4s ease-in-out;
}
.night-mode-off {
background-color: #fff;
color: black;
transition: 0.4s ease-in-out;
}
<body class="night-mode-off">
<button onclick="night()">night mode</button>
</body>
To avoid a lengthy if statement, you can make it one line:
element.classList.replace(darkemodeon ? "night-mode-on" : "night-mode-off", darkemodeon ? "night-mode-off" : "night-mode-on");

Related

Removing transition from background-color doesn't work

I have a script that adds a class "notransition" to the body on the page load (it removes it after set time). I want to remove background-color and color transition from every element, but it doesn't seem to work.
$(window).on("load", function(){
$("body").addClass("notransition");
setTimeout(function(){
$("body").removeClass("notransition");
}, 1000);
});
.notransition *{
transition-property: background-color, color !important;
transition-duration: 0s !important;
}
However, I can remove every transition with code like this:
.notransition *{
transition: none !important;
}
Is it possible to apply it only to color and background-color properties?
Try this code which may help you to fix your problem:
.notransition *{
transition:background-color 0s, color 0s;
}
If I understand your quest properly it should be reverse, e.g. setTransition instead of notransition if you want to flash text on page load:
$('document').ready(function() {
$("body").addClass("setTransition");
setTimeout(function(){
$("body").removeClass("setTransition");
}, 1000);
});
.setTransition {
background-color: yellow;
color: red;
transition-property: background-color, color;
transition-duration: 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="greeting">
Hi there!
</div>

Javascript/jquery, why does my fadein/fadeout not work?

I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.
I got it working with jquery color animation, but then i have to link another library which id like to avoid.
I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..
It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.
TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});
why doesnt this work?
You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.
.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
And in Javascript you can set the color:
if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}
jsfiddle
Try out this simple example
In Your CSS file,
.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
And in your js file just add class before that attach transparent-background class to topNav container
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
}
});
});

Font-family CSS transition

I want to get a hover animation that changes the font-size and font-family the same time. I didn't manage to change back the font family precisely when the font-size transition has finished. Is this even possible?
What I have:
a{
-webkit-transition: font-size .2s ease;
-moz-transition: font-size .2s ease;
-o-transition: font-size .2s ease;
-ms-transition:font-size .2s ease;
transition: font-size .2s ease;
}
a:hover{
font-family: "MyHoverFont";
font-size: 3em;
}
What I tried:
a{
...
-webkit-transition: font-family.2s ease;
-moz-transition: font-family .2s ease;
-o-transition: font-family .2s ease;
-ms-transition: font-family .2s ease;
transition: font-family .2s ease;
}
a:hover{
...
font-family: "MyHoverFont"
}
You can't use animations or transitions with font-family. This means, you actually can do this, but it would change the font-family immediately instead of morphing from one font-family to another.
But I found a good workaround for this (here):
You could do the following: have two divs, each with the same text but
different font. The second div is absolute positioned below the first
div and hidden by default. When the times comes to "morph" the font,
animate the first visible div opacity to 0, and the second div to 1.
It should look like it's morphing at the expense of a little more
convoluted mark up.
Hint
It seems like you do something like the following:
a {
...
transition: font-size .2s ease;
...
transition: font-family .2s ease;
}
But in this case, the second rule overwrites the first rule, so the following is what you usually do:
transition: font-size .2s ease, font-family .2s ease;
Modern browser now support Variable fonts where you can control the available font's settings.
You could also go to this example for controlling the settings.
var changes = [
"'CASL' 1, 'MONO' 1, 'wght' 758, 'slnt' -14",
"'CASL' 0, 'MONO' 0.24, 'wght' 481, 'slnt' -2"
];
// style="font-variation-settings: ... "
text.style.fontVariationSettings = changes[1];
// Change variation every 2 sec
var index = 0;
setInterval(function(){
text.style.fontVariationSettings = changes[index];
index = index === 0 ? 1 : 0;
}, 2000);
#font-face{
font-family:"Recursive";
src:url("https://d33wubrfki0l68.cloudfront.net/0fb48cf42677cf004e48f2608a8521a4ca06b48d/8a39e/assets/fonts/recursive-mono_casl_wght_slnt_ital--2019_11_05-00_13.woff2") format("woff2-variations");
font-weight:300 900;
font-display:swap
}
#text{
text-align: center;
height: 100px;
font-size: 50px;
line-height: 100px;
font-family: Recursive;
font-weight: 500;
transition: 0.5s font-variation-settings ease-in;
}
<div id="text">Hello World</div>
Not all font and options is supported, if you want to find some variable font's resource you could go to this link.
You can use a variant version font, because font-variant uses a mathematical formula for transitions that css transition understands:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
I answered this in another question that I raised in Stack Overflow.
The Javascript demo is at:
https://www.cqrl.in/dev/font-transition-js.html
The GitHub code is here:
https://github.com/Sukii/font-transition
The TUGBoat paper is here:
https://tug.org/TUGboat/tb42-1/tb130venkatesan-transfont.html

Animation inside Block in hidden state

Does animation work if the block content is in state "none"?
For example, if I want to use Load with JQuery, and I want animation to start after the page load, will this work?
.container {
display : none;
}
.container .animate {
transform : translate(0,-100px);
transition : 1s transform ;
}
.show {
display : block ;
}
in jquery
$(function() {
$(".container").addClass("show");
});
If there is another way please help me.
Looks like display:none elements can be animated...
Here's a test : the text is hidden, translates to the right, then shows up : it works.
$("p").addClass("shift");
setTimeout( function(){
$("p").css("display","block");
}, 1000)
p{
display:none;
border:green solid 1px;
width:150px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
p.shift{
transform : translate(300px,0);
-webkit-transform: translate(300px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>some text</p>
Is this what you want?
Just try to change the attr
$(function() {
$(".container").attr("display","block !important");
});

Make CSS hover element permanent onclick

So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"

Categories

Resources