css - show元素然后动画它（由jquery addClass触发）

Question

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

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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;

由于

Answer 1

我发现了真正的问题： 当使用唯一类来显示并将属性更改为动画时，浏览器将直接显示具有新属性的元素（字母间距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>

Answer 2

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

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

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

visibility财产可以帮助您。

Answer 3

您可以使用解决方案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>

Answer 4

你可以在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给你的

Answer 5

＆＃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;