Buton checked'dan çıkınca transition ile eski haline geri çekme

H

|-Hakan-|

Hectopat
Katılım
19 Ağustos 2018
Mesajlar
669
Çözümler
4
Merhabalar, koyu ve açık tema yapıyorum, ama buton'a bastığımda transition komutu devreye giriyor(normal olarak) lakin devre dışı bıraktığımda transition ile yapmıyor direkt olarak eski haline dönüyor.
[CODE title="JS"]function dlmode() {
var icerik = document.querySelector(".content");
var bgclr = document.querySelector(".text");
var jsyazi = document.querySelector(".news");
var jsyazii = document.querySelector(".new-titles");
icerik.classList.toggle("dark-mode");
bgclr.classList.toggle("bgclr");
jsyazi.classList.toggle("jsyazi");
jsyazii.classList.toggle("jsyazi");
}
[/CODE][CODE title="HTML"]<input class="kutudl" type="checkbox" onclick="dlmode()"/>[/CODE]
[CODE title="CSS"].dark-mode{
background-color: whitesmoke;
transition: .5s ease-in;
}
.dark-mode:checked{
transition: .5s ease-in;
}
.bgclr{
background-color: #1f1f1f;
color: whitesmoke;
transition: .75s ease-in;
}
.jsyazi{
color: whitesmoke;
background-color: #1f1f1f;
transition: .75s ease-in;
}[/CODE]
 
Transition değerini ana classa ver. Senin kodda, tıkladığın anda class siliniyor. Bu sebeple transition değerini silmiş oluyorsun.
Temayı bu şekilde değiştirmek yerine :root da kendi renklerini belirle ve javascript kısmında classlarla uğraşmak yerine bu renkleri değiştir. Kendimden bir örnek. Ben bunu yapalı baya oldu.
[CODE lang="css" title="Css Root"]:root {
--header-color: rgb(67, 64, 92);
--list-color: rgb(47, 47, 47);
--secondory-color: #2f2f2f;
--left-color: coral;
--right-color:rgb(255, 185, 144);
}[/CODE]

[CODE lang="javascript" title="Js Kısmı"]const colors = {
orange: {
headerColor: 'rgb(67, 64, 92)',
listColor: 'rgb(47, 47, 47)',
leftColor: 'coral',
rightColor: 'rgb(255, 185, 144)',
secondaryColor: ' #2f2f2f'
},
blue: {
headerColor: 'rgb(255 116 9)',
listColor: 'rgb(66 46 20)',
leftColor: '#509dff',
rightColor: 'rgb(144 195 255)',
secondaryColor: 'rgb(66 46 20)'
},
dark: {
headerColor: 'rgb(255 74 74)',
listColor: 'rgb(220 220 220)',
leftColor: '#2f2f2f',
rightColor: 'rgb(69 71 84)',
secondaryColor: '#82aade'
},
light: {
headerColor: 'rgb(67, 64, 92)',
listColor: 'rgb(47, 47, 47)',
leftColor: '#ffffff',
rightColor: 'rgb(221 222 226)',
secondaryColor: ' #2f2f2f'
}
}

$("#color-orange").click( () => {changeColor(colors.orange)})
$("#color-blue").click( () => {changeColor(colors.blue)})
$("#color-dark").click( () => {changeColor(colors.dark)})
$("#color-light").click( () => {changeColor(colors.light)})

function changeColor(colorPalette) {
document.documentElement.style.setProperty('--header-color', colorPalette.headerColor)
document.documentElement.style.setProperty('--list-color', colorPalette.listColor)
document.documentElement.style.setProperty('--secondory-color', colorPalette.secondaryColor)
document.documentElement.style.setProperty('--left-color', colorPalette.leftColor)
document.documentElement.style.setProperty('--right-color', colorPalette.rightColor)
}[/CODE]
 
RaSGooL dedi:
Transition değerini ana classa ver. Senin kodda, tıkladığın anda class siliniyor. Bu sebeple transition değerini silmiş oluyorsun.
Temayı bu şekilde değiştirmek yerine: Root da kendi renklerini belirle ve JavaScript kısmında classlarla uğraşmak yerine bu renkleri değiştir. Kendimden bir örnek. Ben bunu yapalı bayağı oldu.
[CODE lang="css" title="Css Root"]:root {
--header-color: rgb(67, 64, 92);
--list-color: rgb(47, 47, 47);
--secondory-color: #2f2f2f;
--left-color: coral;
--right-color:rgb(255, 185, 144);
}[/CODE]

[CODE lang="javascript" title="Js Kısmı"]const colors = {
orange: {
headerColor: 'rgb(67, 64, 92)',
listColor: 'rgb(47, 47, 47)',
leftColor: 'coral',
rightColor: 'rgb(255, 185, 144)',
secondaryColor: ' #2f2f2f'
},
blue: {
headerColor: 'rgb(255 116 9)',
listColor: 'rgb(66 46 20)',
leftColor: '#509dff',
rightColor: 'rgb(144 195 255)',
secondaryColor: 'rgb(66 46 20)'
},
dark: {
headerColor: 'rgb(255 74 74)',
listColor: 'rgb(220 220 220)',
leftColor: '#2f2f2f',
rightColor: 'rgb(69 71 84)',
secondaryColor: '#82aade'
},
light: {
headerColor: 'rgb(67, 64, 92)',
listColor: 'rgb(47, 47, 47)',
leftColor: '#ffffff',
rightColor: 'rgb(221 222 226)',
secondaryColor: ' #2f2f2f'
}
}

$("#color-orange").click( () => {changeColor(colors.orange)})
$("#color-blue").click( () => {changeColor(colors.blue)})
$("#color-dark").click( () => {changeColor(colors.dark)})
$("#color-light").click( () => {changeColor(colors.light)})

function changeColor(colorPalette) {
document.documentElement.style.setProperty('--header-color', colorPalette.headerColor)
document.documentElement.style.setProperty('--list-color', colorPalette.listColor)
document.documentElement.style.setProperty('--secondory-color', colorPalette.secondaryColor)
document.documentElement.style.setProperty('--left-color', colorPalette.leftColor)
document.documentElement.style.setProperty('--right-color', colorPalette.rightColor)
}[/CODE]
Genişletmek için tıkla...

Pek anlayamadım ama teşekkürler.
Not: JavaScript'te yeniyim pek bir şey bilmiyorum.
 

Benzer konular

Wankula153
C# Access ile yapılan uygulamada veri tabanı eski haline dönüyor
Mesaj
2
Görüntüleme
334
Wankula153
Wankula153
A
PHP veritabanından buton ile veri çekme
Mesaj
2
Görüntüleme
2B
balyedi
balyedi
Zargles
Transition komutunun yönü nasıl değiştirilir?
Mesaj
0
Görüntüleme
180
Zargles
Zargles
Critowki
C# buton ile program açma
2
Mesaj
10
Görüntüleme
2B
SH1MORTAL
S
Scream_00
C# ile değişken buton yapma
Mesaj
4
Görüntüleme
1B
Vivace
Vivace

Yeni konular

Yeni mesajlar

Geri
Yukarı