在 .orbit-caption 或 .orbit-caption 内的单个元素上使用 CSS3 淡入淡出？答案

【问题标题】：Using CSS3 fadein on .orbit-caption or individual elements inside .orbit-caption?在 .orbit-caption 或 .orbit-caption 内的单个元素上使用 CSS3 淡入淡出？
【发布时间】：2013-04-03 18:25:11
【问题描述】：

我希望能够淡入我的 .orbit-caption 中的某些单个元素（例如 h2 或按钮）。我尝试将 CSS3 应用于 .orbit-caption 和单个元素，但没有任何效果……有什么想法吗？

示例标记（淡入淡出应用于 .orbit-container）如下。

<section id="carousel">
    <div class="row collapse">
        <div class="small-12 large-12 columns">
            <ul data-orbit>
              <li>
                <img src="image" />
                <div class="orbit-caption">
                    <h2 class="carousel">Hunting Coolers</h2>
                    <h3 class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
                </div>
              </li>
              <li>
                <img src="image" />
                <div class="orbit-caption">
                    <h2 class="carousel">Fishing Coolers</h2>
                    <h3 class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
                </div>
              </li>
            </ul>
        </div>
    </div>
</section>

#carousel .orbit-container .orbit-slides-container > * .orbit-caption {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding: 10px 14px;
font-size: 0.875em;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}

【问题讨论】：

标签： jquery css zurb-foundation css-animations orbit

【解决方案1】：

您需要在（通常）初始化 Foundation 之前设置自定义样式。例如，如果这是您的自定义样式：

.the_coolest_orbit_style {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875em;
    -webkit-animation: fadein 5s;
    -moz-animation: fadein 5s;
    -o-animation: fadein 5s;
    animation: fadein 5s;
}

为了让它发挥作用：

$(document).foundation('orbit', {
    orbit_transition_class: 'the_coolest_orbit_style'
    });

$(document).foundation();

【讨论】：