css - show元素然后动画它(由jquery addClass触发)

时间:2017-07-23 09:13:21

标签: javascript jquery html css animation

我试图用css动画元素。 首先隐藏这个元素。一个javascript事件将显示它,我希望它是动画的。 预期的动画是字母间距-2px到字母间距3px



$('#btn').click(function() {
    $('#wrapper').addClass('animate');
});

#wrapper {
    display: none;
    /* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
    display: none; /* the message is not visible before the event */
    letter-spacing: -2px;
    transition: all 3s;
}
#wrapper.animate .message {
    display: block;
    letter-spacing: 3px;
}
#wrapper.animate {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
        <div class="text-center font-size-20">
            <span class="message">
                Message to show and animate
            </span>
        </div>
</div>

<button id="btn">Click me to animate</button>
&#13;
&#13;
&#13;

由于

5 个答案:

答案 0 :(得分:2)

我发现了真正的问题: 当使用唯一类来显示并将属性更改为动画时,浏览器将直接显示具有新属性的元素(字母间距3px)。 为了使它工作,我可以添加超时。 如果它存在,我还在等待更好的解决方案

$('#btn').click(function() {
    $('#wrapper').addClass('show');
    window.setTimeout(function() {
       $('.message').addClass('animate');
    }, 500);
});
#wrapper {
    display: none;
    /* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
    display: none; /* the message is not visible before the event */
    letter-spacing: -2px;
    transition: all 3s;
}
#wrapper.show .message {
    display: block;
}
#wrapper .message.animate {
    letter-spacing: 3px;
}
#wrapper.show {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
        <div class="text-center font-size-20">
            <span class="message">
                Message to show and animate
            </span>
        </div>
</div>

<button id="btn">Click me to animate</button>

答案 1 :(得分:0)

您是否尝试更改display的css值而不是添加类?

$('#btn').click(function() {
    $('#wrapper').css('display', 'block);
});

看看这个:https://www.w3schools.com/cssref/pr_class_visibility.asp

visibility财产可以帮助您。

答案 2 :(得分:0)

您可以使用解决方案https://jsfiddle.net/5h1dgfpu/

$('#btn').click(function() {
    $('#wrapper').addClass('animate');
});
#wrapper .message {
    display: block; /* the message is not visible before the event */
    letter-spacing: -2px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}
#wrapper.animate .message {
    display: block;
    letter-spacing: 3px;
    visibility: visible;
    opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
        <div class="text-center font-size-20">
            <span class="message">
                Message to show and animate
            </span>
        </div>
</div>

<button id="btn">Click me to animate</button>

答案 3 :(得分:0)

你可以在css中使用margin移动项目,对于延迟,你可以在javascript中使用setTimeOut函数,如下所示

<强> HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
        <div class="text-center font-size-20">
            <span class="message">
                Message to show and animate
            </span>
        </div>
</div>

<button id="btn">Click me to animate</button>

<强> CSS

#wrapper .message {
    display: none; /* the message is not visible before the event */
    transition:all 300ms ease-in-out;
    margin-left:0px;
}
#wrapper.animate .message {
    display: block;
    letter-spacing: 3px;
    visibility: visible;
    margin-left:30px;
}

<强> JAVA-SCRIPT

$('#btn').click(function() {
    $('#wrapper span').show();
    setTimeout(function() {
        $('#wrapper').addClass('animate');
        }, 1000);
});

这是fiddle给你的

答案 4 :(得分:0)

&#13;
&#13;
		$(document).ready(function(){
$("#click").click(function(){
$("#text").css("visibility","visible");
$("#text").animate({
            opacity: '1'
        });
   

});
		});
&#13;
#text{
			font-family: monospace;
			font-size: 25px;
			display: block;
visibility: hidden;
opacity: 0.2;
		}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
	<p id="text"> Message to show and animate</p>
	</div>
	<button id="click">Click &  Animate</button>
&#13;
&#13;
&#13;