<%@ Page Title="Animated Transitions" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Animated Transitions - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Animated Transitions</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Animated Transitions on Upload States</div> <div class="demo-card-body"> <p class="demo-description"> CSS transitions animate the uploader between idle, uploading, success, and error states.
 Visual feedback makes the upload experience feel polished and responsive.
 </p> <div class="demo-expect"><strong>What you should see:</strong> files slide into the queue and the bar animates smoothly rather than jumping. Purely presentational - drop several files at once to see the staggered entrance.</div> <style> .animated-uploader {
 --cu-primary: #8b5cf6;
 border: 2px solid #e5e7eb;
 border-radius: 0.75rem;
 padding: 1.5rem;
 transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
 }
 .animated-uploader.cu-uploading {
 border-color: #8b5cf6;
 box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
 background-color: #f5f3ff;
 }
 .animated-uploader.cu-success {
 border-color: #10b981;
 box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
 background-color: #ecfdf5;
 }
 .animated-uploader.cu-error {
 border-color: #ef4444;
 box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
 background-color: #fef2f2;
 }
 .animated-uploader .ajaxuploader-button {
 transition: background-color 0.3s, transform 0.15s;
 }
 </style> <div id="animContainer" class="animated-uploader"> <div id="animUploader"></div> </div> <div class="code-panel"> <pre><code>.animated-uploader {
 transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}
.animated-uploader.cu-uploading {
 border-color: #8b5cf6;
 box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}
.animated-uploader.cu-success {
 border-color: #10b981;
 background-color: #ecfdf5;
}

AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 onTaskStart: function() { container.classList.add('cu-uploading'); },
 onTaskComplete: function() { container.classList.add('cu-success'); }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var container = document.getElementById('animContainer');
 var host = document.getElementById('animUploader');
 if (!container || !host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onTaskStart: function () {
 container.className = 'animated-uploader cu-uploading';
 },
 onTaskComplete: function () {
 container.className = 'animated-uploader cu-success';
 setTimeout(function () {
 container.className = 'animated-uploader';
 }, 3000);
 },
 onTaskError: function () {
 container.className = 'animated-uploader cu-error';
 setTimeout(function () {
 container.className = 'animated-uploader';
 }, 3000);
 }
 });
 })();
</script>
</asp:Content>
