一个CSS3 动画执行完成后的问题...

 赢在青春创业团队 发布于 2022-11-08 05:26

例:

在执行完一段css3动画后需要隐藏这个元素如何操作?也就是让它不重复动作.

使用animation参数forwards无效.

注:前提是不使用jQuery情况下能做到么?

4 个回答
  • 2022-11-12 01:40 回答
  • 可以使用js的定时器。把定时器时间设置成和css动画时间一样就行了

    2022-11-12 01:40 回答
  • 不用jQUery,JavaScript可以接受么?

    取决不同的类型,动画播放过程会触发两类事件:
    1. AnimationEvent
    2. TransitionEvent

    动画结束的事件的两个实现分别是:
    1. animationend
    2. transitionend

    Demo页面在这里,只测试过Chrome:
    http://codepen.io/longtian/pen/jEyrzN

    兼容性大坑可以看AngularUI的这部分源码
    https://github.com/angular-ui/bootstrap/blob/7512b93fecb6f27df4f5aeba4c756c0c36aebbf2/src/transition/transition.js#L59

    2022-11-12 01:40 回答
  • 这个隐藏的话可以设置opacity:0

    我们可以让一个元素的默认opacity=0

    把动画放到一个一个类上,然后给把这个类付给这个属性

    @keyframes ani{
        0%{opacity: 1}//此处显示转换为1 动画结束后就会自动隐藏了,因为元素的opacity为0,应该使用 display也可以,但我没用过,因为display没有动画效果
    }
    
    2022-11-12 01:40 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有