javascript - 有没有办法消除过渡元素中特定元素的过渡效果？

Question

我正在为背景图像应用过渡。现在我将文本放在同一个 div 中。但我不想为该文本应用过渡效果，我正在为其应用淡入淡出效果。

HTML

<div class="small-12 medium-12 large-12  columns home cover">

    <div id="target">
        <div class="small-12 medium-11 large-11 columns text2">
                 Beyond Law,<br/>
                 The Spirit of Innovation is Our strenght.
                 </div>
    </div>


</div>

<div style="clear: both"></div>

脚本

<script>

  $(document).ready(function () {

        $('#target').toggleClass("wide");

});

  </script>

CSS

.cover
{width: 100%; z-index:2000; position: relative; overflow: hidden;margin-bottom: 5%;}
#target {
    position: relative;
    left:0;

    background-image:url('../img/top-bg.jpg');background-repeat:no-repeat;
     width: 120%;
    transition: all 2s ease-in-out;
    background-size:cover;
     height: 600px;
}


/*#target:hover {
    left: -20%;
}*/

#target.wide{
    left: -20%;
    padding-left: 30%;
}
.text2
{
    margin-top:10%;
    margin-left:0;
    padding-left:0;


    /*fade in effect*/
    transition-delay: 2s;
        animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

**可以引用这里的链接:http://vani.valse.com.my/beldon/index.php

Answer 1

您正在为 left 和 padding-left 属性设置动画，它们的本质将影响所有子元素。要达到相同的效果，您可以为 background-position 属性设置动画。

类似的东西:

#target {
  background-position: 200px 50%;
  transition: background-position 2s ease-in-out;
}

#target.wide {
  background-position: 0px 50%;
}