webkit -divへのCSS遷移効果
-
14-10-2019 - |
質問
divのinnerhtmlを変更するとき、私はフェデイン/アウト効果を実行しようとしています。で与えられた例を試してみました Safari Doc
DIVをフェードアウトし、内容を変更してから、新しいコンテンツで再びフェードインしたいと思います。
<style>
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cf {opacity: 0;}
</style>
<body>
<div id="main">
<div id="c"> OLD </div>
</div>
</body>
<script>
var c = document.getElementById("c");
c.setAttribute("class", "cf");
c.innerHTML = '';
c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>
ここで私を助けてください
解決 4
これが私がついに終わったことです。答えてくれてありがとう
init: function(fragment) {
var c = document.getElementById("c");
c.addEventListener( 'webkitTransitionEnd', IDR.callHook(c, fragment), false);
c.setAttribute("class", "cv hide");
},
callHook: function(c, fragment) {
var fp = function() {
c.removeEventListener('webkitTransitionEnd', fp, false);
c.innerHTML = '';
c.setAttribute("class", "cv");
c.appendChild(fragment);
};
return fp;
},
他のヒント
<style>
.cv { opacity:1; background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cv.hide {opacity: 0;}
</style>
[...]
<script>
c.setAttribute("class", "cv hide");
[...]
c.setAttribute("class", "cv");
</script>
私はあなたのコードを書き直しました - 参照してください http://jsfiddle.net/kai/ec64b/
また、使用できるクラス操作機能も含めました。
<style>
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;}
/* .cf {opacity: 0;} */
</style>
<body>
<div id="main">
<div id="c"> OLD </div>
</div>
<script>
var c = document.getElementById("c");
c.setAttribute("class", "cf");
// c.innerHTML = '';
// c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>
</body>
このコードを試してください。ボディクロージングタグの前にスクリプトを置いても、後でではありません。
所属していません StackOverflow