gpt4 book ai didi

javascript - css - 显示元素然后对其进行动画处理(由 jquery addClass 触发)

转载 作者:行者123 更新时间:2023-11-30 15:09:53 25 4
gpt4 key购买 nike

<分区>

我正在尝试使用 CSS 为元素设置动画。首先这个元素是隐藏的。一个 javascript 事件将显示它,我希望它是动画的。预期的动画是 letter-spacing -2px 到 letter-spacing 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>

谢谢

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com