css3 动画重新执行

xiaaaa.z

于 2022-05-16 14:57:17 发布

阅读量943

点赞数

CC 4.0 BY-SA版权

文章标签：动画 css3 typescript

本文链接：https://blog.youkuaiyun.com/weixin_43957384/article/details/124799708

本文介绍如何使用 Vue.js 实现车厢切换时的动画效果，通过删除和添加类名控制'comeIn3s'动画启动，利用`@keyframes`定义了从左50%到左22%的移动过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要实现的效果
请添加图片描述
切换车厢的时候，这个车可以执行”跑进来“的动画
思路通过类名的删除和新增来重新开始动画

  @Watch('carriage')
  private carriageChange () {
    const centerContent = this.$el.querySelector('.train-item-info') as any; //
    if (centerContent) {
      centerContent.classList.remove('animationStart');
      // eslint-disable-next-line
      void centerContent.offsetWidth;
      centerContent.classList.add('animationStart');
    }
  }




	 .animationStart {
	   animation: comeIn 3s;
	 }

	@keyframes comeIn {
	  0%   {left: 50%}
	  100%  {left: 22%;}
	}