アニメーションの問題

Question

.search_iconがクリックされたときの幅の増減が実際の瞬間に変更されています.searchクラスをクリックしたときにサイズが変更されます。なぜ、これらのコードが実際のjqueryライブラリバージョンで動作しないのか、ありがとう。 https://codepen.io/anon/pen/ENqppw

<div class="search"> 
    <input type="text" class="inp"><span class="search_icon"></span></input> 
</div> 

$background-color: #2A2E37; 
$search-bg-color: #242628; 
$icon-color: #00FEDE; 
$transition: all 0.5s ease; 
.inp{ 
    width: 240px; 
    height: 60px; 
    box-shadow: none; 
    border: none; 
    background: transparent; 
    color: #fff; 
    padding: 20px 0px 20px 45px; 
    font-size: 40px; 
    &:focus { 
    outline: none; 
    } 
} 

.search { 
    width:100px; 
    height:100px; 
    background: #3a3a3a; 
    transition: all 0.7s ease; 
    margin:50px; 
    position:absolute; 
&.open { 
    width: 90%; 
    } 
} 
.search_icon { 
    width: 34px; 
    height: 34px; 
    border-radius: 40px; 
    border: 3px solid $icon-color; 
    display: block; 
    position: relative; 
    margin-top:-77px; 
    margin-left:20px; 
    transition: $transition; 
    &:before { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -2px; 
    top: 30px; 
    display: block; 
    background-color: $icon-color; 
    transform: rotate(-45deg); 
    transition: $transition; 
    } 
    &:after { 
    content: ''; 
    width: 3px; 
    height: 15px; 
    position: absolute; 
    right: -12px; 
    top: 40px; 
    display: block; 
    background-color: $icon-color; 
    transform: rotate(-45deg); 
    transition: $transition; 
    } 
    .open & { 
    width: 50px; 
    height: 50px; 
    border-radius: 60px; 
    margin-left:95%; 
    &:before { 
     transform: rotate(45deg); 
     right: 23px; 
     top: 12px; 
     height: 29px; 
    } 
    &:after { 
     transform: rotate(-45deg); 
     right: 23px; 
     top: 12px; 
     height: 29px; 
    } 

    } 
} 

$(function() { 
$('.search').on('click', function() { 
    $(this).toggleClass('open'); 
    $(this).toggleClass('clicked'); 
}); 
    }); 

Answer 1

あなたは代わりにこれを使用することができます：

$(function() { 
    $('.search').on('click', function() { // Expand search on click on it 
     $(this).addClass('open clicked'); 
    }); 

    $('.search_icon').on('click', function(e) { // Collapse search on click on search icon 
     e.stopPropagation(); 
     $(this).closest('.search').removeClass('open clicked'); 
    }); 
});