javascript - 如何使动画关闭与打开相同

Question

同时点击(？)，打开了带有动画效果的选项。动画工作正常。想关闭选项和打开动画一样是选项气泡效果，但是关闭动画效果和打开动画不一样。需要关闭动画也和气泡效果一样。

谁能帮我找出我做的错误。谢谢。

jQuery(document).ready(function() {

    var $body = jQuery('body');
    var $cs_fixed_wrapper = jQuery('.cs_fixed_wrapper');

    // customer service icon click - ex. (?) click
    jQuery('img.cs_trigger_icon').on('click', function(ev) {
        ev.stopPropagation();

        if(jQuery('.cs_options').hasClass('slide_open')) {
            jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
        }
        else {
            jQuery('.cs_options').removeClass('slide_close').addClass('slide_open');
        }
    });

    var clickEvent = {};
    // cs options - trigger functionalities
    $body.on('click', '.cs_action_trigger', function(ev) {
        ev.stopPropagation();

        var window_width = jQuery(window).width();
        var data_type = jQuery(this).data('type');

        if(window_width < 800) {
            if(!clickEvent[data_type]) {
                clickEvent = {};
                clickEvent[data_type] = 1;

                if(data_type == 'contact') {
                    jQuery('.cs_contact').addClass('cs_contact_opened');
                }
                else if(data_type == 'supportarticle') {
                    jQuery('.cs_supportarticle').addClass("cs_supportarticle_opened");
                    return false;
                }
                else if(data-type == 'cs_faq') {
                    jQuery('.cs_faq').addClass("cs_faq_opened");
                }
            } else if (clickEvent[data_type]) {
                clickEvent = {};
                clickEvent[data_type] = 1;

                if(data_type == 'contact') {
                    jQuery('.cs_contact_modal').addClass('opened');
                    $body.addClass('cs_popup_opened');
                    jQuery('.close').fadeOut('200');

                    clickEvent = {};
                }
                else if(data_type == 'tutorial') {
                    jQuery('.cs_tutorial_modal').addClass('opened');
                    $body.addClass('cs_popup_opened');
                    jQuery('.close').fadeOut('200');

                    clickEvent = {};
                }
                else if(data_type == 'supportarticle') {
                    clickEvent = {};
                }
                else if(data_type == 'cs_faq') {
                    jQuery('.cs_faq_modal').addClass('opened');
                    $body.addClass('cs_popup_opened');
                    jQuery('.close').fadeOut('200');

                    clickEvent = {};
                }
            }

        } else {
            if(data_type == 'contact') {
                jQuery('.cs_contact_modal').addClass('opened');
				$body.addClass('cs_popup_opened');
				
                jQuery('.cs_contact_modal .close_btn').fadeIn();
            }
            else if(data_type == 'supportarticle') {
                // console.log(data_type);
            }
            else if(data_type == 'cs_faq') {
                jQuery('.cs_faq_modal').addClass('opened');
				$body.addClass('cs_popup_opened');
				
                jQuery('.cs_faq_modal .close_btn').fadeIn();
            }
        }
    });
    

    // customer service - contact form popup outside close for desktop
    jQuery('.cs_contact_modal').on('click', function(ev) {
        jQuery(this).removeClass('opened');
        $body.removeClass('cs_popup_opened');

        // show close icon on multiple popups
        show_close_icon();

        // body scroll based on condition
        body_scroll_for_custom_pages();

        contact_form_cf7_empty();

    });

    jQuery('.cs_contact_modal .modal_profile_wrapper').on('click', function(ev) {
        ev.stopPropagation();
    });

    // customer service - contact form popup close for desktop
    jQuery('.cs_contact_modal_close').on('click', function(ev) {
        jQuery('.cs_contact_modal').removeClass('opened');
        $body.removeClass('cs_popup_opened');

        // show close icon on multiple popups
        show_close_icon();

        // body scroll based on condition
        body_scroll_for_custom_pages();
        jQuery('.cs_contact').removeClass('cs_contact_opened');
        contact_form_cf7_empty();
    });


    // outside click to close the customer service slide options
    jQuery('body').on('click', function() {
        jQuery('.cs_options').removeClass('slide_open').addClass('slide_close');
    });

});

* {
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background-color: #f7f7f7;
}
.cs_fixed_wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999999;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    visibility: visible;
    opacity: 1;
}
.cs_inner_wrapper {
    position: relative;
    display: flex;
    flex-flow: column-reverse;
    align-items: flex-end;
}
.cs_action_trigger.cs_contact_opened {
    width: 144px;
    transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_opened {
    transition: all 0.5s;
}
.slide_open .cs_action_trigger.cs_contact_closed {
    transition: all 0.5s;
}
.cs_supportarticle {
    margin-bottom: 0px;
    border-radius: 30px;
}
.cs_action_trigger.cs_supportarticle_opened {
    width: 188px;
    transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_supportarticle_opened,
.slide_open .cs_action_trigger.cs_supportarticle_closed {
    transition: all 0.5s;
}
.cs_faq {
    margin-top: 0px;
}
.slide_open .cs_action_trigger.cs_faq_opened {
    width: 102px;
    transition: width 0.5s;
}
.slide_open .cs_action_trigger.cs_faq_opened,
.slide_open .cs_action_trigger.cs_faq_closed {
    transition: all 0.5s;
}
.cs_support_wrapper > img {
    position: absolute;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
}
.cs_options {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    position: relative;
    bottom: 50px;
    opacity: 0;
    transition: all .7s;
}
.cs_options.slide_open {
    opacity: 1;
    transition: transform .2s;
}
.cs_options.slide_close {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s, visibility .4s, opacity .6s;
}
.cs_contact_icon img,
.cs_supportarticle_icon img,
.cs_faq img {
    display: inline-block;
    position: relative;
    transition: all 0.3s ease-in-out;
}
.cs_supportarticle_opened .cs_supportarticle_icon img {
    left: -59px;
}
.cs_contact_opened .cs_contact_icon img {
    left: -40px;
}
.cs_faq_opened .cs_faq_icon img {
    left: -18px;
}
.slide_open .cs_action_trigger .circle {
    animation: bubble .7s 0.5;
}
.slide_close .cs_action_trigger .circle {
    transition: all 1s;
}
.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
}
.cs_faq .circle {
    background: #ff422d;
}
.cs_supportarticle .circle {
    background: #00b44a;
}
.cs_contact .circle {
    background: #00387c;
}
.cs_action_trigger {
    display: block;
    padding: 10px;
    width: 50px;
    height: 50px;
    line-height: normal;
    font-size: 0;
    border-radius: 100%;
    margin: 0 0 10px 0;
    transform: scale(.5);
    transition: transform .5s, top 0.4s;
    position: relative;
    pointer-events: none;
    cursor: pointer;
    white-space: nowrap;
}
.cs_action_trigger:nth-child(1) {
    top: 60px;
}
.cs_action_trigger:nth-child(2) {
    top: 120px;
}
.cs_action_trigger:nth-child(3) {
    top: 180px;
}
.slide_open .cs_action_trigger {
    transform: scale(1);
    top: 0px;
    transition: transform .5s, top .3s;
    pointer-events: all;
}
.cs_action_trigger img {
    width: 28px;
    position: relative;
    transition: left 0.3s;
}
.cs_contact img {
    top: 6px;
    left: 0px;
}
.cs_supportarticle img {
    top: 7px;
    left: 0px;
}
.cs_faq img {
    top: 4px;
    left: 0px;
}
@keyframes bubble{
    0%  {transform: scale(0,0)      translateY(0); }
    10%  { transform: scale(0.5,0.5)   translateY(0); }
    30%  { transform: scale(1.1,1.1)   translateY(-20px); }
    50%  { transform: scale(1.05,1.05) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cs_fixed_wrapper">
        <div class="cs_inner_wrapper">
            <div class="cs_support_wrapper">
                <div class="cs_options slide_close">
                        <div class="cs_contact cs_action_trigger" data-link="cs_contact_popup" data-type='contact'>
                            <span class="circle"></span>
                            <img src="/image/WusFO.png" alt="C"/>
                            <span class="cs_content cs_link_content">Contact Us</span>
                        </div>
                        <div class="cs_supportarticle cs_action_trigger" data-type='supportarticle'>
                            <a href="">
                                <span class="circle"></span>
                                <img src="/image/UzkHq.png" alt="S"/>
                                <span class="cs_content cs_link_content">Support Articles</span>
                            </a>
                        </div>
                        <div class="cs_faq cs_action_trigger" data-link="cs_faq_popup" data-type='cs_faq'>
                            <span class="circle"></span>
                            <img src="/image/VEzHb.png" alt="F"/>
                            <span class="cs_content cs_link_content">FAQ</span>
                        </div>
                </div>
                <img class="cs_trigger_icon" src="/image/sNQUZ.png" alt="C"/>
            </div>
        </div>
    </div>

Answer 1

创建另一组关键帧说“unbubble”并执行完全相反的过渡。

@keyframes unbubble{
    0%  {transform: scale(1,1)      translateY(-10px); }
    30%  { transform: scale(1.1,1.1)      translateY(-15px); }
    50%  { transform: scale(1.05,1.05) translateY(-15px); }
    57%  { transform: scale(1,1)   translateY(-10px); }
    64%  { transform: scale(0.5,0.5)      translateY(0); }
    100% { transform: scale(0,0)      translateY(0); }
}

并在 slide_close 中应用此动画

.slide_close .cs_action_trigger {
    animation: unbubble .7s 0.5;
}

让我知道这是否有效