如何解决用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。