レシポンシブ：ブレイクポイント切り替わりで「ゆっくり動作」になってしまうのを防ぎたい

Question

前提・実現したいこと

レスポンシブサイトで
ブレイクポイント切り替えの動作がゆっくりになってしまう
のを解決したいです。

発生している問題

画面幅を変更して確認をしていた時に
「 ブレイクポイントでの切り替わりがゆっくり動作している 」
ことに気がつきました。
（具体的には画像幅が変わる動作がゆっくり　等）

要素をふわっと出すjQueryを用いているので
sectionなどのほとんどの要素にCSSで
「  transition: all 1s;　」
を使っているのですが、これが原因のようです。
（transition:を消すと解決します。）

    <section id="profile">
      <h2 class="fadein-x-h2">
        profile
      </h2>
      <div class="flex__herf">
      <div class="profile__text fadein">
        <p class="font__optima sytle-bottom15 textl">
          ロゴ
        </p>
        <p class="texts sytle-bottom15">
          テキストテキストテキスト
        </p>
      </div>
      <div class="profile__img fadein">
          <p class="profile__img--01">
            <img src="images/profile01.jpg" alt="プロフィール01">
          </p>
          <p class="profile__img--02">
            <img src="images/profile02.jpg" alt="プロフィール02">
          </p>
      </div>
    </div>
    </section>

// 読み込み時のフェードイン
$('head').append(
'<style>body{display:none;}'
);
$(window).on("load", function() {
$('body').delay(600).fadeIn("slow");
});

// 上下フェードイン
$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});


// 左右フェードイン
$(function(){
    $(window).scroll(function (){
        $('.fadein-x').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $(this).css('opacity','1');
                $(this).css('transform','translateX(0)');
            }
        });
    });
});

// 左右フェードイン-h1用（opacityがちがう）
$(function(){
    $(window).scroll(function (){
        $('.fadein-x-h2').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $(this).css('opacity','.6');
                $(this).css('transform','translateX(0)');
            }
        });
    });
});


jQuery(function() {
    var pagetop = $('#page_top');
    pagetop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {  //100pxスクロールしたら表示
            pagetop.fadeIn();
        } else {
            pagetop.fadeOut();
        }
    });
    pagetop.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500); //0.5秒かけてトップへ移動
        return false;
    });
});

//—しゅーっと移動するver
$(function(){
  $('a[href^="#"]').click(function(){
    var time = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" ? 'html' : href);
    var distance = target.offset().top;
    $("html, body").animate({scrollTop:distance}, time, "swing");
    return false;
  });
});

該当のソースコード　CSS

.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 2s;
}
.fadein-x,.fadein-x-h2 {
  opacity : 0;
  transform: translateX(-50px);
  transition: all 1s;
}

具体的な説明

この.fadein などのclassをほとんどのsectionにかけて
スクロールした際にふわっと表示させるようにしています。

このふわっと表示は保持したまま、
ブレイクポイントの際画像のサイズなどが変わるの
スピードは通常通りすっと変化してほしいです。

こちらの利用が初めてなので
この説明とコードだけでは解決不可能の場合は
不足な部分をご教示いただけると幸いです。

よろしくお願いいたします。

Comments

[azuapricot]

動作確認できるように現在のHTML、CSSのコードを記載すると回答が得られやすいです。

[Lhankor_Mhy]

「ふわっと出す」とは具体的には opacity のアニメーションですか？

[yooina6]

＞azuapricotさん
コメントありがとうございます！
コードをいくらか削って載せてみたのですが文字制限に引っかかり、動作確認できるまでのコードを載せられなさそうでした・・その場合ネットに上げて確認していただく形式でもよいのでしょうか？？

[yooina6]

＞Lhankor_Mhyさん
opacity : 0;　と
transform: translateY(20px);
で一旦非表示にし、jsの方でスクロールすると表示になるようにしています。

[azuapricot]

一部だけでも動作確認できるものがあれば回答は可能かと思います。

Answer 1

  transition: all 2s;

↓

  transition: opacity 2s,transform 2s;

みたいな感じではどうでしょうか？

Comments

[yooina6]

上記で解決しました！！

不足の多い質問にもかかわらずありがとうございました！！