用Javascript链接Animista CSS动画

问题描述

我搜索了如何使用JavaScript链接Animista CSS动画，以滑出一个选项卡并滑入一个新选项卡。我什么都找不到，但我确实找到了this post的关于使用Promises链接动画的信息。

解决方法

我修改了代码以在标签中滑入和滑出容器。

public function bundle_plugins() {

        $settings = "settings.json";
        $arr_data = array();
        
        $plugins = array();
        foreach($_POST['plugin'] as $key => $val) {
            if( !empty($_POST['plugin'][$key]['download']) && !empty($_POST['plugin'][$key]['file'])) {
                $plugins['bundled_plugins'][] = $_POST['plugin'][$key];
            }
        }

        // Get data from existing json file
        $json = file_get_contents($settings);

        // Converts json data into array
        $arr_data = json_decode($json,true);

        // Push user data to array
        $arr_data = array_replace($arr_data,$plugins);

        // Convert updated array to JSON
        $json = json_encode($arr_data,JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);

        //write json data into data.json file
        if(file_put_contents($settings,$json)) {
            echo "<div class='alert alert-success' role='alert'>Plugins successfully bundled!</div>";
        }
        else {
            echo "<div class='alert alert-danger' role='alert'><strong>ERROR</strong> Please check you have entered the plugin download URL and basename correctly and try again.</div>";
        }

    }

// We can declare a generic helper method for one-time animationend listening
let hideElement = (el,animation) => {
  return new Promise(resolve => {
    const onAnimationEndCb = () => {
        el.classList.remove('active',animation);
      el.removeEventListener('animationend',onAnimationEndCb);
      resolve();
    }
    el.classList.add(animation);
    el.addEventListener('animationend',onAnimationEndCb)
  });
}

let showElement = (el,animation) => {
  return new Promise(resolve => {
    const onAnimationEndCb = () => {
      el.classList.remove(animation);
      el.removeEventListener('animationend',onAnimationEndCb);
      resolve();
    }
    el.classList.add('active',animation);
    el.addEventListener('animationend',onAnimationEndCb)
  });
}

let hide_box_one = async () => {
  const el = document.getElementById('div_one');
  await hideElement(el,'slide-out-top');
}
let show_box_two = async () => {
  const el = document.getElementById('div_two');
  await showElement(el,'slide-in-top');
}
let hide_box_two = async () => {
  const el = document.getElementById('div_two');
  await hideElement(el,'slide-out-top');
}
let show_box_one = async () => {
  const el = document.getElementById('div_one');
  await showElement(el,'slide-in-top');
}

let change_tabs = async () => {
  await hide_box_one();
  await show_box_two();
  await hide_box_two();
  await show_box_one();
  await hide_box_one();
  await show_box_two();
  await hide_box_two();
  await show_box_one();
  await hide_box_one();
  await show_box_two();
  await hide_box_two();
  await show_box_one();
}

const btn = document.getElementById('btn');

btn.onclick = function() {
    change_tabs().then(() => console.log('tabs changed'));
};

#div_one {
  width: 50px;
  height: 50px;
  border: 10px solid red;
  display: none;
}
#div_one.active{
  display:block;
}

#div_two {
  width: 50px;
  height: 50px;
  border: 10px solid blue;
  display: none;
}
#div_two.active{
  display:block;
}
#btn{
  margin-top:10px;
  border: 2px solid black;
  background: #fff;
  padding: 15px;
}

.slide-in-top {
    -webkit-animation: slide-in-top 0.6s cubic-bezier(0.250,0.460,0.450,0.940) both;
            animation: slide-in-top 0.6s cubic-bezier(0.250,0.940) both;
}
  
.slide-out-top {
    -webkit-animation: slide-out-top 0.6s cubic-bezier(0.550,0.085,0.680,0.530) both;
            animation: slide-out-top 0.6s cubic-bezier(0.550,0.530) both;
}
  
/* ----------------------------------------------
 * Generated by Animista on 2020-8-22 19:10:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net,t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}

<div id="div_one" class="active"></div> <div id="div_two"></div> <button id="btn" type="button">Next Tab</button>