jQuery FadeIn和CSS幻灯片不连贯

Question

I'm not happy with the current result of the code in the fiddle, I'd like it to be less choppy and just fade in while also sliding in from the bottom but my JQuery skills are not the greatest. 我对小提琴中的当前代码结果不满意，我希望它不那么杂乱无章，只是淡入淡出，同时也从底部滑入，但是我的JQuery技能不是最好的。 Is using CSS as the slide in the best choice? 使用CSS作为最佳选择是幻灯片吗？ Wasn't able to find any examples of sliding in using JQuery. 在使用JQuery时找不到滑动的任何示例。

Any help much appreciated. 任何帮助，不胜感激。

Here's the same code. 这是相同的代码。

<!doctype html>
<html lang="en">
   <style>
      @keyframes slideInFromBottom {
      0% {
      transform: translateY(100%);
      }
      100% {
      transform: translateY(0);
      }
      }
      .v1 { 
      animation: 1s ease-out 0s 1 slideInFromBottom;
      }
      .v2 { 
      animation: 1s ease-out 0.2s 1 slideInFromBottom;
      }
      .v3 { 
      animation: 1s ease-out 0.4s 1 slideInFromBottom;
      }
   </style>
   <head>
      <meta charset="utf-8">
      <title>Vista Report</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
   </head>
   <body>
      <div class="row">
         <div class="col s12 m4">
            <div class="card v1" id="v1">
               <div class="card-image">
                  <img id="preload_v1" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
                  <span class="card-title">Card Title</span>
               </div>
               <div class="card-content">
                  <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
               </div>
            </div>
         </div>
         <div class="col s12 m4">
            <div class="card v2" id="v2">
               <div class="card-image">
                  <img id="preload_v2" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80" style="display:none;">
                  <span class="card-title">Card Title</span>
               </div>
               <div class="card-content">
                  <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
               </div>
            </div>
         </div>
         <div class="col s12 m4">
            <div class="card v3" id="v3">
               <div class="card-image">
                  <img id="preload_v3" src="https://images.unsplash.com/photo-1469461084727-4bfb496cf55a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e7e60237ffbd8c98a087f464f44931c1&auto=format&fit=crop&w=1955&q=80"  style="display:none;">
                  <span class="card-title">Card Title</span>
               </div>
               <div class="card-content">
                  <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
               </div>
            </div>
         </div>
      </div>
   </body>
   <script>
    $("#v1").ready(function(){
      $("#preload_v1").fadeIn(2000);
    });

    $("#v2").ready(function(){
      $("#preload_v2").fadeIn(2000);
    });

    $("#v3").ready(function(){
      $("#preload_v3").fadeIn(2000);
    });
   </script>
</html>

Answer 1

I removed the jQuery scripts and made it work with css alone. 我删除了jQuery脚本，使其仅与CSS一起使用。

replaced style="display:none" on img tag with following css 用以下CSS将img标记上的style="display:none"替换style="display:none"

.card{
   opacity:0;
}

For fadeIn effect changed opacity from 0 to 1 对于fadeIn效果，不透明度从0更改为1

@keyframes slideInFromBottom {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

To keep the animation in final state added forwards to animation and also updated animation-duration and animation-delay 为了使动画保持最终状态， forwards animation添加到animation ，并更新了animation-duration和animation-delay

  .v1 {
    animation: 1s ease-out 0s 1 slideInFromBottom forwards;
  }

  .v2 {
    animation: 1.2s ease-out 0.2s 1 slideInFromBottom forwards;
  }

  .v3 {
    animation: 1.4s ease-in 0.4s 1 slideInFromBottom forwards;
  }

Demo 演示

jQuery FadeIn和CSS幻灯片不连贯

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-02-20 06:24:22

jQuery FadeIn和CSS幻灯片不连贯

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-02-20 06:24:22

解决方案1
2 已采纳 2018-02-20 06:24:22