Ванильный javascript, не CSS или jQuery, постепенное изменение изображения - PullRequest
Новая
       56

Ванильный javascript, не CSS или jQuery, постепенное изменение изображения

0 голосов
/ 14 декабря 2018

Я знаю, что это довольно просто в jQuery, но я хочу сделать это простым javascript "будет навсегда".

У меня есть выпадающий список на моей странице.Я выбираю один из 8 вариантов.На странице отображается изображение по умолчанию.Когда я выбираю опцию, изображение меняется на эту картинку.Все работает нормально.

Но я хочу, чтобы изображение менялось постепенно, постепенно исчезало, потому что я, как и большинство из вас, не могу оставаться в одиночестве.Мы должны продолжать играть.

Имеющийся у меня javascript, который запускается с помощью onchange = "setPicture ()" в раскрывающемся списке выбора: 

function setPicture(){
    var img = document.getElementById("mySelectTag");
    var value = img.options[img.selectedIndex].value;
    document.getElementById("myImageDiv").src = value;
}

Это прекрасно работает.Значением выбранного индекса является строка с путем для каждого изображения.Я просто хочу исчезнуть, а затем исчезнуть, застряв где-то там.Я немного повозился, вызывая другую функцию перед изменением src, но не повезло.

Может ли кто-нибудь указать мне правильное направление?

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Как насчет установки CSS изображения по умолчанию с непрозрачностью 0 и временем перехода, затем в JavaScript просто добавьте класс, который установит непрозрачность в 1 

HTML: 
    <img class="img1" src="sampleimg.jpg">

CSS: 
    .img1 {
        opacity: 0;
        transition: all .3s;
    }
    .img1.show {
        opacity: 1;
    }

JS:
    function setPicture() {
        var img = document.querySelector('.img1');
        img.src = 'urlofnewimage';
        img.classList.add('show');
    }

Надеюсь, это поможет.

0 голосов
/ 14 декабря 2018

Более простой способ - использовать только ключевые кадры CSS .

Но из javascript для этого есть веб-анимация API .

Вот небольшой пример из примера, соответствующий вашему случаю. 

function setPicture(){
 alice.animate(
  [
    { opacity: 1 },
    { opacity: .1},
    { opacity: 1 }
  ], {
    duration: 3000,
    iterations: Infinity
  }
 )
}
<button onclick="setPicture()">
  OPACITY ANIMATION
   </button>

<img id="alice" 
     src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif"
     >
  </img>
...