Question

我想生效，当我点击按钮时会出现先前引用消息和新引号，但具有很好的过渡效果。

在下面的代码中，我尝试使用jQuery .animate和opacity属性，但它只是插入新引号而没有任何动画效果。

＆＃13;

$(function() {

  $('.btn').on('click', function() {
    var letters = '0123456789ABCDEF';
    var $body = $('body');
    var $h1 = $('h1');
    var $innerhtml = $('.innerhtml');
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    $body.css('background', color);
    $h1.css('color', color);
    $innerhtml.css('color', color);

    var link = 'https://gist.githubusercontent.com/rat395/9de1f8ad52f53170f90d9d8a204ee9ad/raw/e3ba3cf835cba8ecf8fa8da1e513bb40059f9355/quotes.json';
  
    $.getJSON(link, function(data) {

      var random = data[Math.floor((Math.random() * data.length) + 1)];
      $innerhtml.animate({ //Here is the problem, its not working
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $(this).html('<p>"' + random[0] + '"</p>' + '<br>' + random[1]);
        });
    })
  });

});

＆＃13;

body {
  transition: all ease-in-out 1.5s;
}

.innerhtml {
  transition: all ease-in-out 1.5s;
}

.flex {
  margin-top: 100px;
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

.wrapper {
  border-radius: 5px;
  padding: 20px;
  background: white;
  width: 50%;
}

.text-in {
  display: flex;
  justify-content: center;
}

.buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.btn {
  height: 40px; 
}

.innerhtml {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  line-height: 30px;
  font-size: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="wrapper">
    <div class="innerhtml"></div>
    <div class="buttons">

      <button class="btn btn-default off"><span class="glyphicon glyphicon-off"</span></button>
      <button class="btn btn-default quote">New quote</button>
      
    
    </div>
  </div>
</div>

＆＃13;

Answer 1

只需更改

.innerhtml {
  transition: all ease-in-out 1.5s;
}

到

.innerhtml {
  transition: color ease-in-out 1.5s;
}

示例：https://jsfiddle.net/edxn2frq/

Answer 2

在正文和.toggleClass()

中添加了.innerhtml

$body.css('background', color).toggleClass('act die');
$innerhtml.css('color', color).toggleClass('act die');

然后定义了两个类：.act和.die，如下所示：

 body.act {
    background: currentColor;
    transition: all ease-in-out 1.5s;
  }
  body.die {
    background: currentColor;
    transition: all ease-in-out 1.5s;
  }

.innerhtml.act {
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  line-height: 20px;
  font-size: 16px;
  transition: all linear 2s;
}
.innerhtml.die {
  line-height: 0;
  font-size: 0;
  transition: all linear 1s;
}

属性transition需要将实际属性放在同一个规则集中，以便知道要设置动画的内容。由于您具有可变颜色属性，因此我使用了background:currentColor。基本布局也有一些变化，所以现在不应该有任何跳跃。

段

＆＃13;

$(function() {

  $('.btn').on('click', function() {
    var letters = '0123456789ABCDEF';
    var $body = $('body');
    var $innerhtml = $('.innerhtml');
    var color = '#';
    var i;
    for (i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    $body.css('background', color).toggleClass('act die');
    $innerhtml.css('color', color).toggleClass('act die');
    var link = 'https://gist.githubusercontent.com/rat395/9de1f8ad52f53170f90d9d8a204ee9ad/raw/e3ba3cf835cba8ecf8fa8da1e513bb40059f9355/quotes.json';

    $.getJSON(link, function(data) {

      var random = data[Math.floor((Math.random() * data.length) + 1)];
      $innerhtml.animate({ //Here is the problem, its not working
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 1000);
          $(this).html('<p>"' + random[0] + '"</p>' + random[1]);
        });
    });
  });

});

＆＃13;

body.act {
  background: curentColor;
  transition: all ease-in-out 2s;
}
body.die {
  background: curentColor;
  transition: all ease-in-out 2s;
}
.wrapper {
  border-radius: 5px;
  padding: 20px;
  background: white;
  width: 50%;
  min-height: 50vh;
  margin: 0 auto;
}
.buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.btn {
  height: 40px;
}
.innerhtml.act {
  text-align: center;
  margin: 20% auto 5%;
  line-height: 20px;
  font-size: 16px;
  transition: all linear 2s;
}
.innerhtml.die {
  line-height: 0;
  font-size: 0;
  transition: all lineaer 1s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class='act'>
  <div class="wrapper">
    <div class="innerhtml die"></div>
  </div>

  <div class="buttons">


    <button class="btn btn-default quote">New quote</button>

  </div>
</body>

＆＃13;

jQuery过渡动画没有发生

2 个答案:

段