Question

我正在为背景图片应用转换。现在我将文本放在同一个div中。但我不想要对此文本进行过渡效果，我应用淡入效果。< / p>

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%;
}

Answer 2

从其中的所有元素中删除转换。

#target * { transition: none}

有没有办法去除过渡元素中特定元素的过渡效应？

2 个答案: