Não é possível adicionar transição nos eventos: `display` e `visibility`.

Acredito que a melhor opção é a `opacity`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    #whatsapp{
    position:fixed;
    width:40px;
    height:40px;
    margin-top:calc(50vh - 55px);
    background:url(img/whatsapp.png);
    background-color: #25D366;
    background-position: center center;
    background-size: cover;
    transition: all 1s;
    }
    #whatsapp:hover{
    width:50px;
    }

    #whatsnumber{
    opacity:0;
    font-size:2rem;
    position: fixed;
    margin-top:calc(50vh - 55px);
    margin-left: 40px;
    width:max-width;
    height:40px;
    background: #25D366;
    line-height: 40px;
    border-right: 10px solid #25D366;
    color: white;
    transition: all 1s;
    }

    #whatsapp:hover ~ #whatsnumber{
    opacity: 1;
    }

    #whatsnumber:hover{
    display: 1;
    }

    #whatsapp:not(hover){
    width:40px;
    transition-duration: 0.2s;
    }

<!-- language: lang-html -->

    <div id="whatsapp"></div>    
    <div id="whatsnumber">(99)99999-9999</div>




<!-- end snippet -->