toggleClass指向a到B点不是平滑过渡

Question

我正在制作一个悬停的toggleClass。我有-webkit-transition：全部轻松0.8s;过渡：所有缓解0.8s;在toggleClass＆＃39;上，但不确定为什么他们没有顺利过渡。 Icon类型只是跳到左边，文本没有慢慢淡入（我假设将使用CSS完成）。任何有助于使过渡更顺畅的帮助将非常感激！

感谢您的时间！

＆＃13;

＆＃13;

$("#clicker1").hover(function() {
            $('.shower').toggleClass('shower-active'); 
            $('.design').toggleClass('design-active', 300);
        
            $('.description').toggleClass('description-active', 300);  
            $('.iconSmaller').toggleClass('iconSmaller-active', 400);
 });

＆＃13;

.col-t {
    width: 300px;
    height: 300px;
    text-align: center;
    float: left;
    box-shadow: inset 0 0 0 0 #035C7A;
	-webkit-transition: all ease 0.8s;
	-moz-transition: all ease 0.8s;
	transition: all ease 0.8s;
    
    
}


.col:hover{
    color: white;
    box-shadow: inset 0 -400px 0 0 #035C7A;

}


.col-t:hover{
    color: white;
    background: #035C7A;
}

.col-t .descritption:hover{
  color: #035C7A;
}

.box {
  background-color: #218D9B;
  height: 100px;
  width: 100px;
}
.iconSmaller {
   -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
}

.design-active{
  display:none;
}


.iconSmaller-active{
  width:200px !important;
  height:200px !important;
  text-align:left;
  padding-top:0px !important;
  float:left;
  padding-left:10px;
  display:block;
  color: white;
}

.shower {
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
}

.shower-active {
  box-shadow: inset 0 -400px 0 0 #444;
  height: 220px;
  color: black !important;
}

.description {
  display:none;
  -webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
  }
 
  .description-active {
    display:block;
    color:white;
    float:right;
    padding-top:30px;
    padding-right:30px;
  }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<section style="width:80%; margin:auto;"> 
    <div class="col-t col1 shower" id="clicker1">
        <div class="iconSmaller">
        <i class="fa fa-pencil-square-o" style="font-size:175px;padding-top:30px;"></i>
            <h1 class="design">DRAW</h1>
            </div>
            <div class="description">
            <p> LOREM<br><br>IPSUM<br><br>TEXT</p>
            </div>
        
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;