我试图用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;
由于
答案 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)
$(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;