webkit - css эффект перехода на div - PullRequest
Новая
       7

webkit - css эффект перехода на div

1 голос
/ 30 декабря 2010

Я пытаюсь создать эффект затухания / исчезновения при изменении innerHTML элемента div.Даже пример, приведенный в 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 ]

2 голосов
/ 30 декабря 2010 
<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>
1 голос
/ 30 декабря 2010

Я переписал ваш код - см. http://jsfiddle.net/Kai/ec64b/

Я также включил некоторые функции манипулирования классами для использования.

0 голосов
/ 31 декабря 2010

Это то, что я наконец закончил делать.Спасибо всем за ответы 

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;
     },
0 голосов
/ 30 декабря 2010 
<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>

Попробуйте этот код.Поместите скрипт перед тегом закрытия тела, а не после.

...