问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css3动画子元素如何不影响父元素

头像
rain
    5036116239
    如题如图，一个div包住一个p，现在这两个元素要分别做动画，先是div上浮之后，p元素在上浮，就那种一个个出现的效果。
    但是在写的时候发现一个问题，对这两个元素分别进行监听发现子元素animationstart之后会触发父元素animationstart，动画结束也是一样（如下图），子元素会带着父元素一起动。
    经过一番思考，我对父元素做了定位position:relative，子元素absolute时，父元素不会跟着一起动，但是监听的还是一样可以监听到子元素动画开始后紧接着就是父元素动画开始。
    问：如何做到父元素与子元素动画不相交？
    image.png 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画问题</title>
    <style>
        div {
            width: 80px;
            height: 150px;
            background: seagreen;
            animation: up 1s linear;
            position: relative;
        }

        p {
            position: absolute;
            animation: down 1s 1s linear;
        }

        @keyframes up {
            0% {
                margin-top: 100px;
                opacity: 0;
            }

            100% {
                margin-top: 0;
                opacity: 1;
            }
        }

        @keyframes down {
            0% {
                margin-top: 0;
                opacity: 0;
            }

            100% {
                margin-top: 50px;
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div>
        <p>后上浮</p>
    </div>

    <script>
        document.getElementsByTagName('div')[0].addEventListener('animationstart', function (e) {
            console.log('外框动画开始');
        })
        document.getElementsByTagName('div')[0].addEventListener('animationend', function (e) {
            console.log('外框动画结束');
            document.getElementsByTagName('div')[0].classList.remove('zoom')
        })
        document.getElementsByTagName('p')[0].addEventListener('animationstart', function (e) {
            console.log('文字动画开始');
        }, false)
        document.getElementsByTagName('p')[0].addEventListener('animationend', function (e) {
            console.log('文字动画结束');
        }, false)
    </script>
</body>

</html>
    html5cssjavascript
    阅读 6k
    1 个回答
    得票最新
    头像
    waterDoge
      1.3k3612

      不是子元素的animationstart事件触发父元素的animationstart事件，而是子元素的animationstart事件会往外传播，想阻止它传播的话调用一下event.stopPropagation()就行了

              document.getElementsByTagName('p')[0].addEventListener('animationstart', function (e) {
            console.log('文字动画开始');
            e.stopPropagation();
        }, false)
        document.getElementsByTagName('p')[0].addEventListener('animationend', function (e) {
            console.log('文字动画结束');
            e.stopPropagation();
        }, false)

      但这只是父元素监听不到子元素的相应事件了而已，并不能解决动画效果不符合你预期的问题

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题