анимация анимации CSS не работает

Question

Привет всем У меня есть одна проблема с анимацией наведения CSS. Я создал две демо:

Первый DEMO анимация работает хорошо. Но seconde DEMO не работает.

Итак, во второй демонстрационной версии вы можете увидеть, что есть два имени, например, Павел и Рианна. Когда вы наведете имя Павла, откроется Hovercard, но без анимации. Но если вы проверите первое демо, вы увидите, как работает анимация. Любой может помочь мне, что мне не хватает, чтобы работать во второй демо, как первая демонстрация.

AJAX:

var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> <a href="http://kraigo.tumblr.com/" class="profile-action">Follow</a> <p class="profile-nick"> <a href="http://kraigo.tumblr.com/">Page Name</a> </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>'; 

$(document).ready(function() { 

    function showProfileTooltip(e, id) { 
     //send id & get info from get_profile.php 
     $.ajax({ 
      url: '/echo/html/', 
      data: { 
       html: response, 
       delay: 0 
      }, 
      method: 'post', 
      success: function (returnHtml) { 
       e.find('.k-isim-wrp').html(returnHtml).promise().done(function() { 
        $('.kisi-isim').addClass('loaded'); 
       }); 
      } 
     }); 

    } 

    function hideProfileTooltip() { 
     $('.kisi-isim').removeClass('loaded'); 
    } 
    $('.kisi-isim').hover(function (e) { 

     var id = $(this).find('.k-isim').attr('data-id'); 
     showProfileTooltip($(this), id); 

    }, function() { 
     hideProfileTooltip(); 
    }); 
}); 

CSS

.k-isim { 
    float:left; 
    width:auto; 
    height:17px; 
    font-weight:bold; 
    position:relative; 
    z-index:0; 
} 
.kisi-isim{ 
    float:left; 
    width:auto; 
    height:17px; 
    font-weight:bold; 
    position:relative; 
} 
.kisi-isim-mask { 
    width:130px; 
    position:relative; 
    z-index:1; 
} 
.loaded .kisi-isim-mask{ 
    z-index:-1; 
} 
.profile-nnm { 
    width:auto; 
    height:17px; 
    display:block; 
} 
.k-isim a:hover:before{ 
    content:''; 
    position:absolute; 
    display:block; 
    width:100%; 
    height:17px; 
    left:0; 
    z-index:2; 
} 
.p-tooltip { 
    position: absolute; 
    margin-top: 10px; 
    top: 100%; 
    left: 50%; 
    margin-left: -140px; 
    width: 280px; 
    max-height: 120px; 
    border-radius: 5px; 
    overflow: hidden; 
    background-color: #F0F0F0; 
    visibility: hidden; 
    opacity: 0; 
    transition: all 0.5s ease; 
} 
.profile-header { 
    height: 120px; 
    background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500); 
    background-size: auto 120px; 
    background-position: 50%; 
} 
.profile-navigation { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 10px; 
    width: 100%; 
    box-sizing: border-box; 
} 
.profile-nick { 
    color: #fff; 
    margin: 0; 
    padding: 0.4em 0; 
    font-size: 0.8em; 
    font-weight: bold; 
} 
.profile-action { 
    float: right; 
    background-color: #eee; 
    padding: 0.4em; 
    border-radius: 2px; 
    color: inherit; 
    text-decoration: none; 
    font-size: 0.8em; 
    font-weight: bold; 
} 
.p-tooltip .profile-nnm { 
    margin: -40px auto 0; 
    width: 80px; 
    height: 80px; 
    background-size: 80px; 
    border: 3px solid #F0F0F0; 
    border-radius: 5px; 
} 
.profile-info { 
    text-align: center; 
    padding: 10px; 
    opacity: 0; 
} 
.profile-title { 
    font-size: 1.6em; 
    margin: 0; 
} 
.profile-description { 
    margin: 0; 
    font-size: 0.8em; 
} 
.profile-items { 
    margin: 0px; 
    padding: 10px; 
} 
.profile-items:after { 
    content:''; 
    display: table; 
    clear: both; 
} 
.profile-items li { 
    width: 80px; 
    height: 80px; 
    background-size: cover; 
    background-position: center; 
    float: left; 
    display: block; 
    border-radius: 3px; 
} 
.profile-items li:not(:first-child) { 
    margin-left: 10px; 
} 
.profile-items li:nth-child(1) { 
    background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY); 
} 
.profile-items li:nth-child(2) { 
    background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb); 
} 
.profile-items li:nth-child(3) { 
    background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large); 
} 
.profile-header { 
    -webkit-transform: translate(0, -50px); 
    -moz-transform: translate(0, -50px); 
    transform: translate(0, -50px); 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
    -webkit-transition-delay: 0.1s; 
    -moz-transition-delay: 0.1s; 
    transition-delay: 0.1s; 
    opacity: 0; 
} 
.profile-info { 
    -webkit-transform: translate(0, 50px); 
    -moz-transform: translate(0, 50px); 
    transform: translate(0, 50px); 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    -webkit-transition-delay: 0.1s; 
    -moz-transition-delay: 0.1s; 
    transition-delay: 0.1s; 
} 
.p-tooltip .profile-ava { 
    -webkit-transform: scale(0.5) translate(0, -10px); 
    -moz-transform: scale(0.5) translate(0, -10px); 
    transform: scale(0.5) translate(0, -10px); 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
    -webkit-transition-delay: 0.1s; 
    -moz-transition-delay: 0.1s; 
    transition-delay: 0.1s; 
    opacity: 0; 
} 
.profile-items li { 
    -webkit-transform: translate(0, 50px); 
    -moz-transform: translate(0, 50px); 
    transform: translate(0, 50px); 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    -webkit-transition-delay: 0.3s; 
    -moz-transition-delay: 0.3s; 
    transition-delay: 0.3s; 
    opacity: 0; 
} 
.profile-items li:nth-child(2) { 
    -webkit-transition-delay: 0.35s; 
    -moz-transition-delay: 0.35s; 
    transition-delay: 0.35s; 
} 
.profile-items li:nth-child(3) { 
    -webkit-transition-delay: 0.4s; 
    -moz-transition-delay: 0.4s; 
    transition-delay: 0.4s; 
} 
.k-isim:hover .p-tooltip { 
    visibility: visible; 
    opacity: 1; 
    max-height: 600px; 
} 
.k-isim:hover .profile-header, .k-isim:hover .profile-info, .k-isim:hover .p-tooltip .profile-ava, .k-isim:hover .profile-items li { 
    -webkit-transform: translate(0, 0) scale(1); 
    -moz-transform: translate(0, 0) scale(1); 
    transform: translate(0, 0) scale(1); 
    opacity: 1; 
} 

Answer 1

Я не проверил все ваши CSS, но я думаю, что вы сделали некоторые изменения по сравнению с рабочей демо, который сделал свой демо не работает. Я думаю, что проблема заключается в том, что у вас нет некоторого запаса (или дополнения) между вашим текстом (ссылка или кнопка) и его контейнером, потому что если вы попытаетесь навести текст справа, анимация работает для обоих текстов, но не при падении его слева, сверху или снизу, я думаю, что нужно некоторое время между зависанием контейнера и текстом. Я добавил границы, чтобы увидеть, что я говорю о:

• Оригинальная рабочая демо: (смотрите, когда я делаю это очень быстро, анимация не всегда работает)

• Ваш демо:

Чтобы избежать этой проблемы, вы должны все это учитывать. Например, вы можете добавить дополнение к вашему классу kisi-isim, как то, что я сделал here.

Конечно, я попытался показать вам, что я думаю о происхождении проблемы, и о том, как вы можете ее избежать. Вы должны отредактировать свой код, чтобы получить результат, который вы ищете, таким образом, который вам нравится.

Надеюсь, что может помочь.