CSS geçişi sırasında öğenin boyut değerini göster

Question

Kullanıcı sayfamdaki belirli bir öğeye ilerlediğinde, genişliğinin bir animasyonunu başlatan sınıf ekliyorum. % 0 genişliğiyle başlıyorum, örneğin% 99'a kadar çıkıyorum. Bu animasyonlar, sayfadaki bu genişlik artışını HTML'de göstermenin bir yolu, yani bu değer artan bir <p> etiketi var mı? CSS sadece bu, kullanıcı Javascript ile ona kaydırdığında sınıfı.

.graph-horiz-bar__bar{ 
    background:$niagara; 
    top:0px; 
    position:absolute; 
    left:0px; 
    width:0; 
    height:100%; 
    transition: width 0.3s; 
} 
.graph-horiz-bar__bar.active{ 
    width:100%; 
    transition: width 0.3s; 
} 

Answer 1

var div = document.getElementById("yourDiv"), parapgraph = document.getElementById("yourParagraph"); 
setInterval(function(){ 
    paragraph.innerHTML = div.offsetWidth + "px"; 
}, 20); 

Bu her 20 ms div genişliğine içerik paragraflar ayarlar.

Answer 2

en basit yolu jQuery .animate() kullanarak step: parametre geri arama akım genişliğini (Dokümanlar okuma) elemanının genişliği animasyon olacaktır ...

kullanarak CSS3 geçişi:

var $bar = $("#bar"), 
 
    $currWidth = $("#currWidth"), 
 
    itv = null; 
 

 
$("#bar").on({ 
 
    // START COUNTING THE WIDTH 
 
    // I used a custom "start" event cause currently (2016) 
 
    // Event.transitionstart is implemented only in IE10+, Edge 
 
    start : function(){ 
 
    $(this).addClass("active"); 
 
    itv = setInterval(function(){ 
 
     $currWidth.text($bar[0].offsetWidth); 
 
    },10); 
 
    }, 
 
    // STOP COUNTING THE WIDTH 
 
    transitionend : function() { 
 
    clearInterval(itv); 
 
    $currWidth.text("INTERVAL STOPPED"); 
 
    } 
 
}); 
 

 

 
$("#start").on("click", function(){ // CLICK JUST FOR DEMO, 
 
    // You need to place this trigger inside your inViewport method 
 
    // when the element enters the viewport 
 
    $bar.trigger("start"); // <<---------------- 
 
});

#bar{ 
 
    height: 20px; 
 
    width:0; 
 
    background:red; 
 
    transition: 3s; 
 
} 
 
#bar.active{ 
 
    width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="start">ACTIVATE BAR</button><!-- TRIGGER BUTTON JUST FOR DEMO --> 
 

 
width <span id="currWidth">0</span> 
 
<div id="bar"></div>

---

kodu hemen hemen gibi görünecektir daha transitionstart tüm büyük tarayıcılar tarafından uygulanacaktır zaman: Muhtemelen

var itv; 

$("#bar").on({ 
    transitionstart: function(){ 
    itv = setInterval(function(){ 
     console.log($bar[0].offsetWidth); 
    },10); 
    }, 
    transitionend : clearInterval(itv) 
}); 

$("#bar").addClass("active"); // place this call where needed 

transitionstep gibi bazı olay o yeterli olabilir başka bir galakside bir gün ....

$("#bar").on("transitionstep", function(){ // :( 
    console.log(this.offsetWidth); 
});