css | scss iç içe transition kullanım sorunu

rotaile 731 gün önce

431 defa görüntülendi ve 1 kişi tarafından değerlendirildi

merhaba arkadaşlar,

<a href="#" class="btn btn-outline-warning px-2">Profili görüntüle <i class="fa-solid fa-angles-right ms-1"></i></a>

a {
    align-self: flex-end;
    padding: 3px 8px;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    box-shadow: $shadow-sm;
    transition: .5s all;
    i {
        transition: .4s all;
    }
    &:hover {
        color: $white;
        i {
            transform: rotateX(180deg) rotateY(180deg);
        }
    }
}

şu şekilde bir yapım var. "<b>a</b>" etiketi hover olunca a etiketinin rengini değiştiriyorum. geçişli olması için transition kullandım. a hover olunca da içerisinde ki "<b>i</b>" etiketinede transform işlemi uyguluyorum. i etiketinin kendisine de transition verince bir gecikme oluyor a etiketinde de transition olduğu için bunu benmi yanlış kullanıyorum yoksa bir çözümü var mı?

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (5)

munzevi

731 gün önce

css'i hiç sevmedim, javascript varken artık css de dinamikleştirmek adına arayüzde hiç style bile yazmıyorum. bu da pratik yapmadığım için bildiklerimi unutmama sebep oluyor. ancak sadece dikkatsizlik yaptığım için, mesaj kasmaya çalışan bir ergenmişim gibi tavır takınman hoş olmadı. css konularına bir daha bakmayacağım, senin sorduğun sorularada.

    a{
        align-self: flex-end;
        padding: 3px 8px;
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        box-shadow: $shadow-sm;
        transition: .5s all;
    }
    a i {
        transition: all .4s;
    }
    a:hover > i{
        display: inline-block;
        color: $white;
        transform: rotateX(180deg) rotateY(180deg);
    }

a {
	align-self: flex-end;
	padding: 3px 8px;
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	box-shadow: $shadow-sm;
	transition: .5s all;
	i {
		transition: all .4s;
	}
	&:hover {
		>i {
			display: inline-block;
			color: $white;
			transform: rotateX(180deg) rotateY(180deg);
		}
	}
}

#009818

rotaile

731 gün önce

Dostum şuanda senin yaptığın şey sadece i etiketi hover olduğu zaman çalışır ve sadece i etiketini içerisinde ki yazı,ikona etki eder. Yardım etmek istiyorsun biliyorum ama yazmış olmak için yazma

#009811

munzevi

731 gün önce

@rotalie hover için animation kullanabilirsin, öyle bi yazdın ki kendimden şüphe ettim hover da animation kullanılmıyor mu diye. alternatif bir kullanım fikiri idi benimki, neyse dediğin gibi olsun;

    a{
        align-self: flex-end;
        padding: 3px 8px;
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        box-shadow: $shadow-sm;
        transition: .5s all;
    }
    a i {
        transition: all .4s;
    }
    a i:hover{
        display: inline-block;
        color: $white;
        transform: rotateX(180deg) rotateY(180deg);
    }

<a>Profili görüntüle <i>test</i></a>

sanırım scss hali de şöyle

a {
	align-self: flex-end;
	padding: 3px 8px;
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	box-shadow: $shadow-sm;
	transition: .5s all;
	i {
		transition: all .4s;
		&:hover {
			display: inline-block;
			color: $white;
			transform: rotateX(180deg) rotateY(180deg);
		}
	}
}

not: bence Y eksenini eksi yapmayı dene, daha güzel dönüyor.

#009807

rotaile

731 gün önce

@munzevi animation değil transition kullanıyorum. çünkü hover olunca bir işlem yapıyorum

#009805

munzevi

731 gün önce

normalde test edip yanıt veriyorum ama, css dalınca çıkamıyorum : ) animation kullansan olmuyor mu? bana başlangıç sürelerinin çakışması gibi bir problem yaşıyormuşsun gibi geldi. animation da ne zaman animasyonun başlayacağını seçebiliyorsun.

a için delay'ı 0 ayarlayıp duration'u 0.5
b için delay'ı 0.5 ayarlayıp duration'u 0.4 yapabilirsin.

böylece a tetiklendiğide hemen çalışır ve çalışma süresi sona erdiği anda b çalışır.

animaton'un parametrelerini karştırmadan yazmak için bu siteden https://webcode.tools/generators/css/keyframe-animation faydalanıyorum. lazım olursa buradan da faydalanmanı tavsiye ederim.

#009803