Блог

Главная - Вопросы по программированию - Как работает элемент dom с двумя css-анимациями и взаимодействует друг с другом?

Как работает элемент dom с двумя css-анимациями и взаимодействует друг с другом?

#css #reactjs #animation

#css #reactjs #Анимация

Вопрос:

в настоящее время я применяю две анимации к некоторым изображениям. Первый при входе в режим просмотра, второй при наведении курсора мыши.

 .Intro {  
  background-image : url('../../img/backgroundWorkshop.svg');
  background-size: cover;
  min-height: 100vh;
  color: black;
  padding-top : 20vh;
  display: flex;
  justify-content: center;
}
.AnimationGame1{
  animation: animGame 1 2s ease-in forwards;
}
.AnimationGame2{
  animation: animGame 1 2s ease-in forwards 0.25s;
}
.AnimationGame3{
  animation: animGame 1 2s ease-in forwards 0.5s;
}
.AnimationGame4{
  animation: animGame 1 2s ease-in forwards 0.75s;
}
.AnimationGame img:hover{
  animation: animGameHover 1 10s ease-out alternate;
  position: relative;
  padding: 3px;
  width: 100%;
}

@keyframes animGame {
  0% {
    transform: translateX( -2vw) translateY(1vh);
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(1vh);
    opacity: 1;
  }
}
@keyframes animGameHover {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2.5);
  }
    }

Проблема в том, что при наведении курсора на эти изображения запускается анимация наведения, а затем, когда она заканчивается, снова запускается анимация класса «AnimationGame».

Вот JSX, который я использую, react-bootstrap:

     <Row className="Intro">
        <Col md={2}>
            <p className="middle">Previous</p>
        </Col >
            <Col sm={6} md={4}>
            <div className="AnimationGame">
                <div>
                    <img src={anim1} className="AnimationGame1"></img>
                    <img src={anim2} className="AnimationGame2"></img>
                </div>
                <div>
                    <img src={anim3} className="AnimationGame3"></img>
                    <img src={anim4} className="AnimationGame4"></img>
                </div>

            </div>
        </Col>
        <Col sm={6} md={4}>
            <div className="Presentation">
                <h1 className="slideTextTitle">PC Gamer and Web Addict</h1>
                <p className="slideTextPres"></p>

            </div>
            <div className="parcours">

            </div>
            <div className="social">

            </div>
            <div className="suite">

            </div>
        </Col>
        <Col md={2}>
            <p className="right middle">Next</p>
        </Col>
    </Row>

Кто-нибудь понимает, почему это происходит?

Ответ №1:

я не вижу, что не так, на самом деле я пробовал это сам. Может быть, вы могли бы добавить свой html?

Вы можете остановить анимацию, когда она будет выполнена, используя fill:freeze;

если это не работает, пожалуйста, добавьте свой html, потому что, когда я использую классы, которые вы использовали, это работает довольно хорошо. И, возможно, объясните немного подробнее, чего именно вы хотите. Я был бы рад вам помочь!

Комментарии:

1. Я отредактировал сообщение с помощью моего JSX, я работаю с react. К сожалению, замораживание не помогло: первая анимация перезагружается при каждом наведении курсора мыши на изображения, более того, они даже неправильно масштабируются при взаимодействии двух анимаций… Спасибо за вашу помощь в любом случае.

2. Я немного поиграл с этим и выяснил, какая работа заключалась в том, чтобы придать div-элементам вокруг img класс. Я думаю, что если вы поместите div вокруг каждого отдельного изображения с классом, это сработает 🙂 после этого вам останется только изменить класс при наведении курсора мыши на ваш новый класс вместо «img» . Анимационная игра img:hover{ становится : .AnimationGame .(newclass):hover{

3. Да, это работает при добавлении оберточного div и игре со структурой html. Спасибо, вы собираетесь проверить.