Icon Transform

by paulftw

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div class="transistor">
    <i class="ion-arrow-shrink active"></i>
    <i class="ion-arrow-return-left"></i>
</div>

CSS

body {
    position: relative;
}

.transistor {
    margin: 30px;
    font-size: 36px;
    height: 48px;
    width: 48px;
}

.transistor:hover i {
    //opacity: 1;
    //transition: opacity 0.5s;
}

.transistor:hover .active {
    //opacity: 0;
}

.transistor i {
    opacity: 0;
    position: absolute;
    transform: rotate(360deg) scale(0, 0);
    
    transition: transform 0.52s, opacity 0.502s;
}

.transistor i.active {
    opacity: 1;
    transform: rotate(0deg);
}

JavaScript

var active = 0;
console.log('fooo');

$('.transistor').click(function() {
    console.log('fooo');
    $('.transistor i').removeClass('active');
    active = 1 - active;
    $($('.transistor i')[active]).addClass('active');
});