如何在动漫js中管理动画顺序
How to manage animation order in anime js
现在我必须使用动画 js 制作一些动画:第一步是显示三个隐藏元素(input[type='date']、input[type='time']、select ) 点击 img(id='arrow')。如果用户再次单击箭头,则将它们全部隐藏,切换:) 但是当页面加载动画自动启动时,不是通过单击。
<script>
var fn1 = anime({
targets: '.web-f',
margin: ['20px 0px','20px 5px'],
opacity: ['0', '1'],
easing: 'easeInOutQuad'
});
document.querySelector('#arrow').onclick = function() {
fn1.play();
fn1.finished.then(() => {
fn1.reverse();
})
}
</script>
<div id="midlebox">
<form method='POST' action='/favourites'>
{% for row in result %}
<div class="form-check">
<input type="checkbox" class="check" name="row" id="{{row[1]}}" value="{{row[0]}}">
<label class="form-check-label" for="{{row[1]}}">{{ row[0] }}</label>
</div>
{% endfor %}
<div class="date_option">
<button type="submit" class="btn" id='btn_add' name='btn_add'>Add to fav</button>
<div class="white_block" id="arrow-box"><img id="arrow" src="static/images/right.svg"></div>
<select name='food_type' class="web-f" id="selector">
<option>Auto</option>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
<option>Snack</option>
</select>
<input type="date" name='calendar' class="web-f" value="" id="calendar">
<input type="time" name="timer" class="web-f" value="" id="timer">
</div>
</form>
</div>
您可以使用回调来观看动画结束和 运行 其他。
function anim1() {
anime({
targets: ".web-f",
margin: ["20px 0px", "20px 5px"],
opacity: ["0", "1"],
easing: "easeInOutQuad",
begin: function(anim) {
beginLogEl.value = "began : " + anim.began;
},
complete: function(anim) {
// call other animation
anim2()
}
});
}
function anim2() {
anime({
targets: ".web-f",
margin: ["20px 5px", "20px 0px"],
opacity: ["1", "0"],
easing: "easeInOutQuad"
});
}
// call ist other animation
anim1()
现在我必须使用动画 js 制作一些动画:第一步是显示三个隐藏元素(input[type='date']、input[type='time']、select ) 点击 img(id='arrow')。如果用户再次单击箭头,则将它们全部隐藏,切换:) 但是当页面加载动画自动启动时,不是通过单击。
<script>
var fn1 = anime({
targets: '.web-f',
margin: ['20px 0px','20px 5px'],
opacity: ['0', '1'],
easing: 'easeInOutQuad'
});
document.querySelector('#arrow').onclick = function() {
fn1.play();
fn1.finished.then(() => {
fn1.reverse();
})
}
</script>
<div id="midlebox">
<form method='POST' action='/favourites'>
{% for row in result %}
<div class="form-check">
<input type="checkbox" class="check" name="row" id="{{row[1]}}" value="{{row[0]}}">
<label class="form-check-label" for="{{row[1]}}">{{ row[0] }}</label>
</div>
{% endfor %}
<div class="date_option">
<button type="submit" class="btn" id='btn_add' name='btn_add'>Add to fav</button>
<div class="white_block" id="arrow-box"><img id="arrow" src="static/images/right.svg"></div>
<select name='food_type' class="web-f" id="selector">
<option>Auto</option>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
<option>Snack</option>
</select>
<input type="date" name='calendar' class="web-f" value="" id="calendar">
<input type="time" name="timer" class="web-f" value="" id="timer">
</div>
</form>
</div>
您可以使用回调来观看动画结束和 运行 其他。
function anim1() {
anime({
targets: ".web-f",
margin: ["20px 0px", "20px 5px"],
opacity: ["0", "1"],
easing: "easeInOutQuad",
begin: function(anim) {
beginLogEl.value = "began : " + anim.began;
},
complete: function(anim) {
// call other animation
anim2()
}
});
}
function anim2() {
anime({
targets: ".web-f",
margin: ["20px 5px", "20px 0px"],
opacity: ["1", "0"],
easing: "easeInOutQuad"
});
}
// call ist other animation
anim1()