CSSの記述順について
解決したいこと
vueでサイトを作っています。
vueのscriptの方でclassListを変更しようとしていたのですが、思っていたことができません。
この理由を教えていただきたいです。
該当するソースコード
<template>
<div ref="slideRef" class="slide-off">
<img src="slideImg"/>
</div>
</template>
<script lang="ts">
... //関係ないコードは省きます
const slideRef = ref<HTMLDivElement>();
if(slide要素がAという領域にある時) {
slideRef.value && slideRef.value.classList.add("slide-on")
}else { //Bという領域にある時
slideRef.value && slideRef.value.classList.remove("slide-on")
}
</script>
<style lang="sass" scoped>
@mixin slide
width: 40rem
height: 25rem
position: absolute
top: 17%
left: 55%
overflow: hidden
.slide-on
@include slide
animation: slide 7s ease-in-out
@keyframes slide
0%
transform: rotateX(0)
100%
transform: rotateX(-3600deg)
.slide-off
@include slide
</style>
上記のコードの場合は正常に動くきます。
この.slide-onと、.slide-offを下記のように入れ替えると、slide要素がBという領域にある時、.slide-offのスタイルが適用されません。（デベロッパーツールの要素欄を見ると要素のclass名はclass="slide-off"となっているが、style欄を見ると.slide-offがない。）
<style lang="sass" scoped>
@mixin slide
width: 40rem
height: 25rem
position: absolute
top: 17%
left: 55%
overflow: hidden
.slide-off
@include slide
.slide-on
@include slide
animation: slide 7s ease-in-out
@keyframes slide
0%
transform: rotateX(0)
100%
transform: rotateX(-3600deg)
</style>
自分で試したこと
上記のようにスタイルの順番を入れ替えると、正常になったので、スタイルの書き順に問題があるんだと思いました。しかし、理由が明確に説明できないので、教えていただきたいです。
よろしくお願いいたします。
0