問題
消えるときに CSS3 transition してから DOM から取り外すというとき transition の duration と timeout の秒数を同期するにはどうしたらよいかと。
こうしてみた
JavaScript で transition-duration を読み取って setTimeout に渡すとか。 transition-delay も加算するともうちょっと実用的か。
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" href="./index.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="./index.js"></script>
<meta charset="utf-8">
<title>CSS3 transition with JavaScript</title>
</head>
<body>
<h1>CSS3 transition with JavaScript</h1>
<div id="js-main"></div>
<button id="js-add">add</button>
</body>
</html>
index.css
#js-add {
position: fixed;
bottom: 1ex;
}
.fade-button {
opacity: 0;
transform: scale(0.9);
visibility: hidden;
transition: all 0.3s;
}
.is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
}
index.js
var FadeButton = Backbone.View.extend({
tagName: 'button',
className: 'fade-button',
events: {
'click' : 'hide'
},
render: function() {
this.$el.text(this.cid);
setTimeout(function(){
this.$el.addClass('is-visible');
}.bind(this), 1);
return this;
},
hide: function() {
var duration = parseFloat(this.$el.css('transition-duration')) * 1000;
this.off();
this.$el.removeClass('is-visible');
setTimeout(function() {
this.remove();
}.bind(this), duration);
}
});
$(function(){
$('#js-add').on('click', function(){
var button = new FadeButton();
$('#js-main').append(button.render().$el);
});
});
もっといい方法あった
transitionendイベントでより正確にtransitionの終了が取得できないでしょうか？
oh ...
index(改).js
hide: function() {
var gone = _.bind(function() {
this.off();
this.remove();
console.debug("I have gone.");
}, this);
this.$el.one('transitionend', gone);
this.$el.removeClass('is-visible');
}
JS Bin はこちら CSS3 transition with JavaScript