Используйте Transform Scale onClick - PullRequest
Новая
       14

Используйте Transform Scale onClick

0 голосов
/ 27 ноября 2018

в надежде, что мне здесь помогут.Я только хочу использовать CSS для масштабирования.Поэтому я хочу, чтобы изображение масштабировалось, когда я щелкаю элемент div.Я хочу нажать на div, который связывает меня с другой страницей и масштабирует изображение на второй странице.Вот как я хочу чтобы CSS выглядел: 

.dragon {
   background-image: url(img/dragon.jpg);
   transform: scale(15);
   transition-duration: 1.7s;
   transition-timing-function: cubic-bezier(1, 0.1, 1, 0.1);
   transition-delay: 1s;
}

Ниже div на 1-й странице: 

<div className="home-littlefinger-img-container">
    <Link to="/dragon" className="littlefinger-img" name="littlefinger"> </Link>
</div>

Я хочу, чтобы функция onClick была присоединена к элементу ссылки.

Это вторая страница: 

class Dragon extends Component {
  constructor(props) {
    super(props);
        this.state = {
    };
  }

  render() {
    return (
       <div className="dragon-img-container">
          <div className="dragon"></div>
       </div>
    );
  }
}

export default Dragon;

Любая быстрая помощь будет принята с благодарностью!Спасибо, ребята!

1 Ответ

0 голосов
/ 27 ноября 2018

Вы должны использовать animation, а не transition.Таким образом, вы можете намного лучше контролировать время «масштабирования»

См. Фрагмент ниже: 

.dragon {
   background-image: url('http://via.placeholder.com/70x50');
   height:50px;
   width:70px;
   animation-delay:1s;
   animation-duration:1.7s;
   animation-timing-function:cubic-bezier(1, 0.1, 1, 0.1);
   animation-name: scaleAnimation;
   animation-fill-mode:forwards;
}

@keyframes scaleAnimation {
  0% {transform:scale(1);}
  100% {transform:scale(15);}
}
<div class="dragon-img-container">
  <div class="dragon"></div>
</div>
...