Непрозрачность SVG Animate для значения переменной - PullRequest
Новая
       37

Непрозрачность SVG Animate для значения переменной

0 голосов
/ 16 марта 2019

Я пытаюсь анимировать элемент svg, чтобы он исчезал (медленно и изящно), когда двоичная переменная установлена ​​в ноль, а затем снова появляется (снова, приятно и медленно), когда двоичная переменная возвращается к единице.У меня исчезает изображение, но я не могу понять, как оно появилось снова.Вот код JavaScript: 

function go() {

    var max = 2;
    var random = Math.floor(Math.random() * Math.floor(max));;
    console.log("hi" + random);

    var elements = document.getElementsByTagName("animate");
    for (var i = 0; i < elements.length; i++) {
        if (random == 1) {
            elements[i].beginElement();
        }
        else {
            elements[i].endElement();

        }

    }
}

, а вот элементы SVG 

  <svg xmlns="http://www.w3.org/2000/svg" class="icons" width="40" height="40">
<g class="icon" transform="translate(-2 -2)">
  <path class="icon__sight" d="M38.255 20.182A16.353 16.353 0 0 0 23.818 5.745V2h-3.636v3.745A16.353 16.353 0 0 0 5.745 20.182H2v3.636h3.745a16.353 16.353 0 0 0 14.437 14.437V42h3.636v-3.745a16.353 16.353 0 0 0 14.437-14.437H42v-3.636h-3.745zM22 34.727A12.727 12.727 0 1 1 34.727 22 12.718 12.718 0 0 1 22 34.727z" fill="#fff"/>
  <circle class="icon__indicator" cx="8" cy="8" r="8" transform="translate(14 14)" fill="#88db29">
    <animate dur="1" attributeName="opacity" from="1" to="0" begin="move.end" repeatCount="0" fill="freeze" />
  </circle>/>
</g>

Любые советы или рекомендации с благодарностью.Будь добр, я новичок в этом:)

1 Ответ

3 голосов
/ 17 марта 2019

Это кажется слишком сложным для простого перехода непрозрачности SVG.Почему бы не использовать CSS для перехода из состояния в управление классом через JS? 

svg {
  transition: opacity 0.5s ease;
}

svg.hidden {
  opacity: 0;
}

var svg = document.querySelector('svg');
...
        if (random == 1) {
            svg.classList.remove('hidden');
        }
        else {
            svg.classList.add('hidden');

        }
...