Skip to main content
Se agrega característica para guardar estado de la rejilla
Origen Enlace
const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    rejillaEncendida = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if(this.rejillaEncendida) {
            j = 0;
            this.$powerRejilla();
        }
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
                        ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
            j = 1;
            this.$powerRejilla();
            this.encendido = false;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
            this.rejillaEncendida = true;
        }
        else if (j == 1){
            if(i !== 0) {
                this.rejillaEncendida = false;
            }
                  ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Edición

Si deseas guardar el estado de la rejilla, basta con agregar otra variable booleana para ello. Por ejemplo, podemos crear una variable llamada rejillaEncendida de tipo booleana también, por defecto en false. Al encender la rejilla, su valor cambia a true y se mantiene así aunque se apague el ventilador. El valor de esta variable cambiará sólo si se apaga la rejilla desde la perilla de la rejilla y no de la perilla del ventilador.

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
                        ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
            j = 1;
            this.$powerRejilla();
            this.encendido = false;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>
const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    rejillaEncendida = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if(this.rejillaEncendida) {
            j = 0;
            this.$powerRejilla();
        }
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
                        ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
            j = 1;
            this.$powerRejilla();
            this.encendido = false;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
            this.rejillaEncendida = true;
        }
        else if (j == 1){
            if(i !== 0) {
                this.rejillaEncendida = false;
            }
                  ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Edición

Si deseas guardar el estado de la rejilla, basta con agregar otra variable booleana para ello. Por ejemplo, podemos crear una variable llamada rejillaEncendida de tipo booleana también, por defecto en false. Al encender la rejilla, su valor cambia a true y se mantiene así aunque se apague el ventilador. El valor de esta variable cambiará sólo si se apaga la rejilla desde la perilla de la rejilla y no de la perilla del ventilador.

Se agrega apagado de rejilla con el apagado de las aspas
Origen Enlace

Cuando el ventilador se para, se establece el valor de j en 1, se llama al método de girar la rejilla y se establece encendido a false, de esta forma se apaga tanto el ventilador como la rejilla.

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
            this.encendido = false;
            ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
            j = 1;
            this.$powerRejilla();
            this.encendido = false;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>
const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
            this.encendido = false;
            ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Cuando el ventilador se para, se establece el valor de j en 1, se llama al método de girar la rejilla y se establece encendido a false, de esta forma se apaga tanto el ventilador como la rejilla.

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
                        ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
            j = 1;
            this.$powerRejilla();
            this.encendido = false;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>
Origen Enlace

Es muy sencillo, agrega a tu clase una propiedad o atributo llamada encendido de tipo booleano con valor por defecto en false.

Al momento de llamar a girarAspas() estableces su valor a true, y sólo lo cambias a false cuando la perilla está en el estado de apagado (i = 3).

Cuando presionas en la perilla de girar la rejilla, verificas el estado de la propiedad encendido, si la misma es false retornas (sales) de la función sin hacer nada más, y si la misma es true puedes encender el giro de la rejilla.

Por ejemplo:

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
            this.encendido = false;
            ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Espero que esto te ayude a resolver el problema.