Как я могу начать градиент изображения при нажатии кнопки? - PullRequest
Новая
       7

Как я могу начать градиент изображения при нажатии кнопки?

0 голосов
/ 07 января 2019

У меня проблема с кодом градиента, я кодирую его в css, и все работает отлично, но проблема в том, что градиент изображения запускается автоматически, поэтому я хочу, чтобы градиент запускался при нажатии кнопки

Я пытался связать его с функцией в сценарии Java, но это не сработало 

<style>
.image {
width: 50vw;
height: 70vh;
position relative;
margin-top: -49%;
background: linear-gradient(-135deg, #ffffff, #ffffff, #ffffff, #ffffff, 
#d9d9d9, #b3b3b3, #8c8c8c, #595959, #333333, #000000 ,#000000 ,#000000);
background-size: 400% 400%;
-webkit-animation: Gradient 5s ;
-moz-animation: Gradient 5s ;
animation: Gradient 5s ;
animation-fill-mode: forwards;
}

@keyframes Gradient {
0% {
    background-position: 0% 50%
}
100% {
    background-position: 100% 50%
}
}
</style>
<body>

<input type="radio" name="switch" value="on" onclick="changeImage()" />
<input type="radio" name="switch" value="off" checked="checked"         
onclick="changeImage()"/>

</div>


<div class = "image">
<img src="image/bef_logo.png" id="myImage" style= "width: 10vw; position: 
absolute; margin: 11% 0% 0% 19%;">
</div>

<script>
    function changeImage() {
        var image = document.getElementById('myImage');
        if (image.src.match("image/bef_logo.png")) {
            image.src = "image/aft_logo.png";
        }
        else {
            image.src = "image/bef_logo.png";
        }
    }
</script>

</body>

это мой код, изображение и градиент ... все, что я хочу, это запустить градиент (который появляется в коде CSS .image), когда применяется функция changeimage ()

1 Ответ

0 голосов
/ 08 января 2019

Вы можете сделать анимацию независимой от изображения, создав новый класс в CSS: 

.switch-animation{
 -webkit-animation: Gradient 5s ;
-moz-animation: Gradient 5s ;
animation: Gradient 5s ;
animation-fill-mode: forwards;
}

Все, что связано с анимацией, вынимается и добавляется в этот класс.

Когда у вас есть класс, добавьте строку кода ниже где-нибудь в вашей функции changeImage(), это переключит анимацию. 

<script>
   function changeImage() {

    if (image.src.match("image/bef_logo.png")) {

        //Code to toggle animating class:
        document.querySelector('.image').classList.toggle('switch-animation');

        image.src = "image/aft_logo.png";

    }
    else {
        image.src = "image/bef_logo.png";
    }

   }
</script>
...