как добиться * плавного * затухания анимации на мобильном телефоне с помощью jquery и css3?

Я знаю, что я могу исчезать и исчезать с jquery, но на мобильном телефоне он будет нервным и как низкий fps или что-то еще. После долгих поисков я обнаружил, что могу использовать переход css3 для перехода к opacitiy 0, но проблема в том, что элемент все равно будет иметь место для себя. даже с видимостью: нет, он сохранит пространство, в котором он был. единственный способ - использовать display: нет, но, как я знаю, я не могу оживить это. Так есть ли способ добиться плавного затухания анимации на мобильном телефоне с помощью комбинация jquery и css3? или хотя бы один? Спасибо.

**EDIT**: хорошо, ответ на fadeout работает довольно хорошо, теперь fade in будет сладким. проблема в том, что я думаю, что мне нужно pul миллисекундную задержку после ('#id').css('display','block') и до ('#id').css('opactity','1'). не если это эффективно и все. но это работает таким образом, но все мои другие анимации не будут работать. все еще в замешательстве.

6
css css3 html javascript jquery

4 ответов

вы всегда должны пытаться использовать переходы CSS3 вместо анимации jQuery. Здесь я использую переход CSS3 для исчезновения .square, а затем я жду, пока переход не закончится, чтобы установить display до none.

если вы анимируете элемент в jQuery, например, используя fadeOut, вы увидите, что произойдет. Он в основном устанавливает непрозрачность в 1, а затем уменьшает это значение до 0 с крошечными приращениями. Это очень неэффективно. Поэтому лучше всегда использовать переходы CSS3 и анимации, где это возможно.

Fade out:https://jsfiddle.net/danhaswings/znLL0ws5/1/

Fade in:https://jsfiddle.net/danhaswings/kjgmxa8x/

HTML-код

<div class="square"></div>

в CSS

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s ease-in-out;
}

jQuery

var $square = $('.square');

$square.css('opacity', '0');

$square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    $(this).css('display', 'none');
});
6

какой телефон вы тестируете, чтобы получить такие медленные / нервные анимации? Mine, похоже, отлично работает для всех анимаций, которые поддерживаются в мобильных браузерах.

В любом случае, вы всегда можете попробовать использовать ключевые кадры для CSS.

к сожалению, вы не можете анимировать определенные атрибуты (например,display), но это позволяет довольно много вещей, включая непрозрачность, как показано под.

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}
.to_hide {
  -webkit-animation: hide 5s forwards;
  animation: hide 2s forwards;
}
@-webkit-keyframes hide {
  from {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    position: absolute;
    opacity: 0;
  }
}
<div class="to_hide"></div>
<div></div>

В конечном счете, на мобильных телефонах вы должны стараться избегать использования анимации, поскольку мобильные браузеры не оптимизированы для таких вещей. Ваш сайт должен изящно деградировать как в размере, макете, контенте, так и в анимации.

3

должно идти гладко, если вы используете jQuery fadeIn(), который будет исчезать в элементе с
display: none

$element.fadeIn();


function show() {
  $("#el").fadeIn();
}
#el {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="show()">Show</button>
<div id="el">Hello</div>
-1

посмотреть в этой статье

вы всегда должны избегать анимации свойств, которые вызовут макет или краски, оба из которых дороги и могут привести к пропущенным кадрам.

вы должны быть в состоянии достичь перехода затухания, сочетающего свойства непрозрачности и преобразования

-1