文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >CSS幻灯片不会滑动，而是只会出现。

问CSS幻灯片不会滑动，而是只会出现。
EN

Stack Overflow用户
提问于 2015-01-10 12:00:44
回答 2查看 75关注 0票数 1

我试图让div#project-wrapper在点击a.post-link时向下滑动，此时div.post-container将通过JS添加fadeOutDown类，并从顶部逐渐消失。我有几个问题：

1) div#project-wrapper获取通过JS添加的activated类，在单击a.post-link时不向下滑动。相反，它只是出现了。

2) fadeOutDown类被添加到.post-container中，但是div不执行我编写的任何CSS动画。

有人能帮帮我吗？

小提琴：http://jsfiddle.net/eLooLb4c/2/

代码语言：javascript
运行
复制
<div id="project-wrapper">
    <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif">
    <div id="project-container">
        <div class="post-container fadeOutDown">
            <div id="project-left-content">
                <h1 class="entry-title">Test 1</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>
            <div id="project-right-content"></div>
        </div><!-- #post-## -->
    </div>
</div>
<a class="post-link" href="#">post link</a>

CSS

代码语言：javascript
运行
复制
#project-wrapper {
    background: #000;
    color: #fff;
    display: none;
    margin: 0 1%;
    position: relative;
    transform: translateY(-100%);
    -webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
}

#project-wrapper.activated {
    display: block;
    transform: translateY(0);
}

#project-wrapper #loading-animation {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}

#project-wrapper #project-container {
    overflow: hidden;
    padding: 40px;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 0;
    margin-bottom: -10px;
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
          animation-name: fadeOutDown;
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

#project-wrapper #project-container .post-container #project-left-content {
    float: left;
    margin-right: 4%;
    width: 40%;
}

#project-wrapper #project-container .post-container h1 {
    font-family: Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 40px;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 0.8em;
}

#project-wrapper #project-container .post-container #project-right-content {
    background: #222;
    float: left;
    height: 350px;
    margin-top: 10px;
    width: 56%;
}

JS

代码语言：javascript
运行
复制
$('.post-link').click(function(e) {
    e.preventDefault();

    function projectShow() {
        $('#project-wrapper').addClass('activated');
        $('.post-container').addClass('fadeOutDown');
    }

    if ($(window).scrollTop() != 0) {
        $('html, body').animate({
            scrollTop : 0
        },500, projectShow);
    } else {
        projectShow();
    }
});
javascript
jquery
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-10 12:06:50

这不能解决你的第一个问题，但第二个问题是因为你还没有给你的动画时间。参见编辑--我知道第一部分太小提琴了

​

代码语言：javascript
运行
复制
$('.post-link').click(function(e) {
    e.preventDefault();
    
    function projectShow() {
        $('#project-wrapper').addClass('activated' );
        $('.post-container').addClass('fadeOutDown');
    }
    
    if ($(window).scrollTop() != 0) {
        $('html, body').animate({
            scrollTop : 0
        },500, projectShow);
    } else {
        projectShow();
    }
});
代码语言：javascript
运行
复制
#project-wrapper {
    background: #000;
    color: #fff;
    display: none;
    margin: 0 1%;
    position: relative;
    transform: translateY(-100%);
    -webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
}

#project-wrapper.activated {
    
    display: block;
    transform: translateY(0);
}

#project-wrapper #loading-animation {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}

#project-wrapper #project-container {
    overflow: hidden;
    padding: 40px;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 0;
    margin-bottom: -10px;
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown 5s;
          animation-name: fadeOutDown;
}

.fadeOutDown {
    -webkit-animation: fadeOutDown 5s;
    animation-name: fadeOutDown;
}

#project-wrapper #project-container .post-container #project-left-content {
    float: left;
    margin-right: 4%;
    width: 40%;
}

#project-wrapper #project-container .post-container h1 {
    font-family: Helvetica,sans-serif;
    text-transform: uppercase;
    font-size: 40px;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 0.8em;
}

#project-wrapper #project-container .post-container #project-right-content {
    background: #222;
    float: left;
    height: 350px;
    margin-top: 10px;
    width: 56%;
}
代码语言：javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="project-wrapper">
    <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif">
	<div id="project-container">
        <div class="post-container">
    	    <div id="project-left-content">
	            <h1 class="entry-title">Test 1</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>
            <div id="project-right-content"></div>
        </div><!-- #post-## -->
    </div>
</div>
<a class="post-link" href="#">post link</a>

​

编辑 小提琴

我把display:block从这里移走了

代码语言：javascript
运行
复制
#project-wrapper.activated {
transform: translateY(0);
}

我像这样编辑jquery

代码语言：javascript
运行
复制
 function projectShow() {
    $('#project-wrapper').show(500);
    $('#project-wrapper').addClass('activated');

    $('.post-container').addClass('fadeOutDown');
}

​

代码语言：javascript
运行
复制
$('.post-link').click(function (e) {
    e.preventDefault();

    function projectShow() {
        $('#project-wrapper').show(500);
        $('#project-wrapper').addClass('activated');

        $('.post-container').addClass('fadeOutDown');
    }

    if ($(window).scrollTop() != 0) {
        $('html, body').animate({
            scrollTop: 0
        }, 500, projectShow);
    } else {
        projectShow();
    }
});
代码语言：javascript
运行
复制
#project-wrapper {
    background: #000;
    color: #fff;
    display: none;
    margin: 0 1%;
    position: relative;
    transform: translateY(-100%);
    -webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
    transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
}
#project-wrapper.activated {
    
    transform: translateY(0);
}
#project-wrapper #loading-animation {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
}
#project-wrapper #project-container {
    overflow: hidden;
    padding: 40px;
}
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 0;
        margin-bottom: -10px;
        -webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
.fadeOutDown {
    -webkit-animation: fadeOutDown 5s;
    animation: fadeOutDown 5s;
}
#project-wrapper #project-container .post-container #project-left-content {
    float: left;
    margin-right: 4%;
    width: 40%;
}
#project-wrapper #project-container .post-container h1 {
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 40px;
    font-size: 3em;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 0.8em;
}
#project-wrapper #project-container .post-container #project-right-content {
    background: #222;
    float: left;
    height: 350px;
    margin-top: 10px;
    width: 56%;
}
代码语言：javascript
运行
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-wrapper">
    <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif">
    <div id="project-container">
        <div class="post-container">
            <div id="project-left-content">
                 <h1 class="entry-title">Test 1</h1>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
            </div>
            <div id="project-right-content"></div>
        </div>
        <!-- #post-## -->
    </div>
</div>
<a class="post-link" href="#">post link</a>

​

票数 1
EN

Stack Overflow用户

发布于 2015-01-10 13:40:08

由于您使用的是jquery，所以您可以省去一些麻烦和所有这些css，并使用如下所示：

代码语言：javascript
运行
复制
function projectShow() {
    $('#project-wrapper').slideDown();
    $('.post-container').hide().fadeIn();
}

小提琴：更新的例子

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/27876002

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档