CSS转换不适用于flex-box元素

如何解决CSS转换不适用于flex-box元素

因此，我最近试图制作一个标头，其中使用CSS flex属性来对齐元素。

当我尝试制作一些动画时出现了问题...

这是当我使用flex属性的直接子级时发生的事情，即在flexbox中，我使用content-左，中，右对齐元素。

视频链接（在登录元素中进行翻译）-https://drive.google.com/file/d/1TrBrW4KoI43SH0IJj5AQYiq2qNWFqcwv/view

我的代码...

HTML


<header className='second-header'>
  <a href='/tours' className='second-header__content--left'>
    All Tours
  </a>

  <img
    src='images/logo-white.png'
    alt='Logo'
    className='second-header__content--center'
  />
  <a href='/' className='second-header__content--right'>
    Log In
  </a></header>


CSS
    .second-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $color-grey-dark;
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: uppercase;
    a {
        text-decoration: none;
        color: $color-grey-light-2;
        margin: 0 3rem;
    }
    img {
        height: 3rem;
        width: 6rem;
    }
        &__content--left,&__content--right {
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
            &:hover,&:active {
                text-shadow: 0.5rem 1rem 2rem rgba(0,1);
                transform: translateY(-.25rem);
                -webkit-transform: translateY(-.25rem);
                -moz-transform: translateY(-.25rem);
                -ms-transform: translateY(-.25rem);
                -o-transform: translateY(-.25rem);
            }
        }
    }
}

现在这就是当我在内容中添加另一个元素而翻译不起作用时发生的事情

视频链接-https://drive.google.com/file/d/1wvTGNCe98qbAb1-aZQZofTar0ow84Ci_/view

我的相同代码

HTML

<header className='second-header'>
  <a href='/tours' className='second-header__content--left'>
    All Tours
  </a>

  <img
    src='images/logo-white.png'
    alt='Logo'
    className='second-header__content--center'
  />
  <section className='second-header__content--right'>
    <a href='/' className='second-header__content--right-login'>
      Log In
    </a>
    <button className='second-header__content--right-signup'>
      Sign Up
    </button>
  </section>
</header>

CSS

    .second-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $color-grey-dark;
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: uppercase;
    a {
        text-decoration: none;
        color: $color-grey-light-2;
        margin: 0 3rem;
    }
    img {
        height: 3rem;
        width: 6rem;
    }
    &__content--left,&__content--right-login {
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        &:hover,&:active {
            text-shadow: 0.5rem 1rem 2rem rgba(0,1);
            transform: translateY(-.25rem);
            -webkit-transform: translateY(-.25rem);
            -moz-transform: translateY(-.25rem);
            -ms-transform: translateY(-.25rem);
            -o-transform: translateY(-.25rem);
        }
    }
    &__content--right {
        button {
            text-decoration: none;
            background-color: $color-grey-dark;
            padding: 1rem 2rem;
            border: 1px solid $color-grey-light-2;
            border-radius: 100px;
            -webkit-border-radius: 100px;
            -moz-border-radius: 100px;
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
            color: $color-grey-light-2;
            text-transform: uppercase;
            font-family: Lato;
            font-size: 1.4rem;
            font-weight: 300;
            &:hover,&:active {
                cursor: pointer;
                color: $color-grey-dark;
                background-color: $color-white;
            }
        }
    }
}

在第二部分中大家都可以看到，没有发生任何转换（仅应用了文本阴影），我真的很想知道是我的代码体系结构是引起问题的原因还是其他原因。如果您发现我的代码太长，请检查我的体系结构和内容-正确，内容-正确登录元素。预先感谢善良的灵魂为我解决了这个问题。