Question

我有一些JavaScript代码，在点击两个按钮之一时会应用display:none和display:inline的css样式，但我似乎无法让它们淡入淡出很好，即时显示无/内联对眼睛有点刺耳。

＆＃13;

//<![CDATA[
var submitcount42059 = 0;

function checkWholeForm42059(theForm) {
    var why = "";

    if (theForm.FirstName) 
        why += isEmpty(theForm.FirstName.value, "First Name");

    if (theForm.LastName) 
        why += isEmpty(theForm.LastName.value, "Last Name"); 

    if (theForm.EmailAddress) 
        why += checkEmail(theForm.EmailAddress.value); 

    if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { 
        if (theForm.CardName) 
            why += isEmpty(theForm.CardName.value, "Name on Card"); 
        if (theForm.CardNumber) 
            why += isNumeric(theForm.CardNumber.value, "Card Number"); 
        if (theForm.Amount) 
            why += isCurrency(theForm.Amount.value, "Amount"); 
    } 

    if (theForm.PaymentMethodType) 
        why += checkSelected(theForm.PaymentMethodType, "Payment Method");
    
    if(why != "") 
    {
        alert(why);
        return false;
    }

    if(submitcount42059 == 0)
    {
        submitcount42059++;
        theForm.submit();
        return false;
    }
    else
    {
        alert("Form submission is in progress.");
        return false;
    }
}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
function ShowCCFields(val) {							
    if (!document.getElementById('paymentdiv'))
	    return;  		
	if (val != 1)
	    document.getElementById('paymentdiv').style.display = 'none';				
	else
		document.getElementById('paymentdiv').style.display = 'inline';
}				
//]]>

＆＃13;

<div id="paymentdiv">
    <div class="col-md-4">
        <div class="form-group">
            <label>Card Number<sup>*</sup></label><br />
            <input class="form-control dark" id="CardNumber" type="text" pattern="[0-9]*" name="CardNumber" />
        </div>
    </div>
</div>
            
<div class="col-xs-12 col-md-6"> 
    <label class="PayCC"><input class="PaymentMethodType" onclick="ShowCCFields(this.value);" type="radio"  value="1" name="PaymentMethodType" />
        <span>Credit Card</span>
    </label>
</div>
<div class="col-xs-12 col-md-6"> 
    <!--<label class="PayCC"><input class="PaymentMethodType" onclick="ShowCCFields(this.value);" type="radio" value="3" name="PaymentMethodType" /><span>COD (Cash on Delivery)</span></label><br>-->
                            
    <label class="PayCC"><input class="btn btn-primary" onclick="ShowCCFields(this.value);" type="radio" value="5" name="PaymentMethodType" />
        <span>PayPal</span>
    </label>
</div>

＆＃13;

Answer 1

我不知道你是否愿意看其他图书馆，但d3.transition似乎是你正在寻找的。

A nice descriptive quote of what it would involve

D3的selection.transition方法可以在更改DOM时轻松设置转换动画。例如，要立即将文本颜色更改为红色，可以选择body元素并设置颜色样式：

d3.select（“body”）。style（“color”，“red”）;

要改变随时间变化的动画，请获得转换：

d3.select（“body”）。transition（）。style（“color”，“red”）;

这是一个很好的互动教程I learnt about d3 transitions with

使用Javascript淡入/淡出

1 个答案: