SVG可变值上的动画不透明度

Question

I am trying to animate an svg element to disappear (slowly and gracefully) when a binary variable is set to zero and then reappear (again, nice and slow) when the binary variable is back to one. I have the image disappearing, but cant seem to figure out haw to get it to reappear. Here is the 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();

        }

    }
}

and here is the SVG elements

  <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>

Any tips or advice is greatly appreciated. Be kind, I am new to this :)

Answer 1

This seems overly complicated for simply transitioning the opacity of the SVG. Why not utilize CSS to transition the state with manipulating the class via your 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');

        }