CSS 2 个图标之间的过渡（材料设计）

Question

Is possible change className of ID with a smooth transition between elements? Using CSS Transition? or Changing opacity of.mdi-star?

https://jsfiddle.net/fekula/n3gjfcvp/1/

<script>
function changeFavButtonClass(){
if ( document.getElementById("fav_button_icon").className == 'mdi mdi-48px mdi-star-outline' ){
   document.getElementById("fav_button_icon").className = 'mdi mdi-48px mdi-star';
}else{
   document.getElementById("fav_button_icon").className = 'mdi mdi-48px mdi-star-outline';
}
}
</script>

<i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline" onclick="changeFavButtonClass()"></i>
                

Thanks

Answer 1

You can do this with some CSS animation and keyframes. Take a look what I did here:

https://jsfiddle.net/ko9nx4mt/1/

 function changeFavButtonClass(){ if ( document.getElementById("fav_button_icon").className == 'mdi mdi-48px mdi-star-outline' ){ document.getElementById("fav_button_icon").className = 'mdi mdi-48px mdi-star'; }else{ document.getElementById("fav_button_icon").className = 'mdi mdi-48px mdi-star-outline'; } }

 .mdi-star-outline{ animation:fade1 1s linear; }.mdi-star{ animation:fade2 1s linear; } @keyframes fade1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade2 { 0% { opacity: 0; } 100% { opacity: 1; } }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline" onclick="changeFavButtonClass()"></i>

Answer 2

To have a real nice effect between the outlined and full star, like I think you want:

You have to use a container to absolute position the full star over the outlined one with opacity at zero.

Then on click, just change the opacity... A CSS transition will then work.

 let fullStarState = false; function changeFavButtonClass() { fullStarState =;fullStarState. document.querySelector(".star-full").style.opacity = Number(fullStarState) }

 .icon-wrap{ position: relative; display: inline; }.star-full{ position: absolute; left: 0; opacity: 0; transition: opacity 1s; }

 <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css" rel="stylesheet" /> <div class="icon-wrap" onclick="changeFavButtonClass()"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline"></i> <i id="fav_button_icon" class="mdi mdi-48px mdi-star star-full"></i> </div>

---

EDIT

You probably want more than one star in the page...

Here is a better variant of the JS.

 document.querySelectorAll(".icon-wrap").forEach(function(star){ star.addEventListener("click", function(event){ let full = this.querySelector(".star-full") let star_opacity = full.style.opacity full.style.opacity = (star_opacity)? 0: 1 }) })

 .icon-wrap{ position: relative; display: inline; }.star-full{ position: absolute; left: 0; opacity: 0; transition: opacity 1s; }

 <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css" rel="stylesheet" /> <div class="icon-wrap"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline"></i> <i id="fav_button_icon" class="mdi mdi-48px mdi-star star-full"></i> </div> <div class="icon-wrap"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline"></i> <i id="fav_button_icon" class="mdi mdi-48px mdi-star star-full"></i> </div> <div class="icon-wrap"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline"></i> <i id="fav_button_icon" class="mdi mdi-48px mdi-star star-full"></i> </div> <div class="icon-wrap"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline"></i> <i id="fav_button_icon" class="mdi mdi-48px mdi-star star-full"></i> </div> <div class="icon-wrap"> <i id="fav_button_icon" class="mdi mdi-48px mdi-star-outline"></i> <i id="fav_button_icon" class="mdi mdi-48px mdi-star star-full"></i> </div>