Question

我正在使用JQuery创建html元素并将它们附加到文档中，但我想知道如何使用类似于此页面的内容来描述“向下摆动”动画向下到底页面。 https://cssanimation.rocks/list-items/

我正在使用setInterval方法逐个追加div，但我尝试了网站中描述的方法，但它不起作用。

timer = (setInterval(addprojectsNow, 1000));

function addprojectsNow(){
    console.log("FIRSTCLICK ADDPROJECTS", firstClick);
    console.log("PROJECTS LINKS OBJECT", projectLinks);

        let newProject = $('<div style="display: none;" class="col-md-6">').attr('id', count);
        let innerDiv = $('<div class="portfolio-item well">');
        let heroku = $('<a href="' + projectLinks[count].project.herokuLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><h4><b>' + projectLinks[count].project.heroku + '</b></h4></a>');
        let github = $('<a href="' + projectLinks[count].project.githubLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><b><h4>Github Link</b></h4></a>');
        let img = $('<img style="border: solid; border-width: thin; border-style: dashed;" class="img-portfolio img-responsive" src="' + projectLinks[count].project.imgSRC + '"' + '>');
        innerDiv.append(heroku);
        innerDiv.append(github);
        innerDiv.append(img);
        newProject.append(innerDiv);



        $(newProject)addClass('show').appendTo('.portfolio-showcase').show('slow');


        return;
}

//要追加新<divs>的容器。最后嵌套的div具有'.swing'类。

<section id="portfolio" class="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center ">
                <h2>My Applications</h2>
                <hr class="medium bold">
                <div class="row portfolio-showcase swing">

/ CSS

.swing {
  perspective: 500px;
}

.swing div.col-md-6 {
  opacity: 0;
  -webkit-transform: rotateX(-90deg);
  -webkit-transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

.swing div.show {
  opacity: 1;
  -webkit-transform: none;
  -webkit-transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

Answer 1

您可以在追加之前设置项目

var newDiv =＆＃34;

Answer 2

$(newProject)addClass你错过了一个。

$(newProject).addClass

Answer 3

存在一些语法问题：

$（newProject）.addClass（ '节目'）appendTo（图集-展示。 '）示出了（' 慢'）;

请添加。就在$（newProject）之后

Answer 4

试试这个

setInterval(function(){ 

    var newProject = $('<div style="display: none;" class="col-md-6">').attr('id', count);
    var innerDiv = $('<div class="portfolio-item well">');
    var heroku = $('<a href="' + projectLinks[count].project.herokuLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><h4><b>' + projectLinks[count].project.heroku + '</b></h4></a>');
    var github = $('<a href="' + projectLinks[count].project.githubLink + '"' + ' target="_blank" class="col-md-12 col-sm-12 col-xs-12 col-lg-12"><b><h4>Github Link</b></h4></a>');
    var img = $('<img style="border: solid; border-width: thin; border-style: dashed;" class="img-portfolio img-responsive" src="' + projectLinks[count].project.imgSRC + '"' + '>');
    innerDiv.append(heroku);
    innerDiv.append(github);
    innerDiv.append(img);
    newProject.append(innerDiv);

    newProject.addClass('show').appendTo('.portfolio-showcase').show('slow');

    return;

}, 1000);

Answer 5

定义初始样式，然后使用通过jQuery添加的类覆盖它们，覆盖类使用transition来创建效果。但是你需要在setInterval中添加类，以便元素以初始样式添加到DOM中，然后接收要转换的新样式，否则元素将获得新的课程太快，过渡不会激发。这是一个演示。

＆＃13;

$('button').on('click',function() {
  $newEl = $('<li>foo</li>');
  $('ul').append($newEl);
  setTimeout(function() {
    $newEl.addClass('show');
  })
})

＆＃13;

li {
  list-style: none;
  background: #d1703c;
  border-bottom: 0 solid #fff;
  color: #fff;
  height: 0;
  padding: 0 0.5em;
  margin: 0;
  overflow: hidden;
  line-height: 2em;
  width: 10em;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);
}

.show {
  height: 2em;
  border-width: 2px;
  opacity: 1;
  transform: none;
}

ul { 
  perspective: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

<ul>
</ul>

＆＃13;

Answer 6

$（newProject）.appendTo（＆＃39; .portfolio-陈列柜＆＃39）; 的setTimeout（函数（）{$（newProject）.addClass（＆＃34;显示＆＃34;）}，500）

使用JQuery在样式中添加div

6 个答案: