Bir Koşula Bağlı Animasyon (C#)

Christian Wenz tarafından

PDF’yi İndir

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyonun çalıştırılıp çalıştırılmadığı da bazı JavaScript kodu biçimindeki bir koşula bağlı olabilir.

Genel Bakış

ASP.NET AJAX Denetim Araç Seti'ndeki Animasyon denetimi yalnızca bir denetim değil, bir denetime animasyon eklemek için bir çerçevenin tamamıdır. Animasyonun çalıştırılıp çalıştırılmadığı da bazı JavaScript kodu biçimindeki bir koşula bağlı olabilir.

Adımlar

Her şeyden önce, sayfaya öğesini ScriptManager ekleyin; ardından ASP.NET AJAX kitaplığı yüklenerek Denetim Araç Seti'nin kullanılması mümkün olur:

<asp:ScriptManager ID="asm" runat="server" />

Animasyon, aşağıdakine benzer bir metin paneline uygulanır:

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">    
 ASP.NET AJAX is a free framework for quickly creating a new generation of more    
 efficient, more interactive and highly-personalized Web experiences that work    
 across all the most popular browsers.<br />    
 ASP.NET AJAX is a free framework for quickly creating a new generation of more     
 efficient, more interactive and highly-personalized Web experiences that work   
 across all the most popular browsers.<br />    
 ASP.NET AJAX is a free framework for quickly creating a new generation of more     
 efficient, more interactive and highly-personalized Web experiences that work    
 across all the most popular browsers.<br />    
</asp:Panel>

Panelin ilişkili CSS sınıfında güzel bir arka plan rengi tanımlayın ve panel için sabit bir genişlik ayarlayın:

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

Ardından , özniteliğini ve zorunlu olan öğesini sağlayarak IDTargetControlID sayfasına ekleyin AnimationExtenderrunat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

Düğüm içinde <Animations> , sayfa tamamen yüklendikten sonra animasyonları çalıştırmak için kullanın <OnLoad> . Öğe, <Condition> normal animasyonlardan biri yerine devreye girer. Özniteliğin değeri ConditionScript olarak sağlanan JavaScript kodu çalışma zamanında yürütülür. True olarak değerlendirilirse animasyon yürütülür, aksi takdirde yürütülür. Aşağıdaki işaretleme iki animasyon sağlar ve bunların her biri rastgele durumlarda %50'sinde yürütülür. içinde <OnLoad>yalnızca bir animasyon olabileceğinden, iki <Condition> animasyon öğesi kullanılarak <Sequence> birleştirilir:

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
  <Animations>
    <OnLoad>
      <Sequence>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <Resize Width="1000" Height="150" Unit="px" />
        </Condition>
        <Condition ConditionScript="Math.random() &lt; 0.5">
          <FadeOut Duration="1.5" Fps="24" />
        </Condition>
      </Sequence>
    </OnLoad>
  </Animations>
</ajaxToolkit:AnimationExtender>

Öznitelikteki küçüktür işaretinin ConditionScript ()< kaçış işareti () olması gerektiğini unutmayın. Bu betiği çalıştırdığınızda animasyon çalıştırılmaz ya da iki betikten biri çalıştırılmaz ya da her ikisi de çalışır.

Panel yeniden boyutlandırılmadan soluk görüntüleniyor, bu nedenle ikinci animasyon çalışıyor, ilk animasyon çalışmıyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)