css - 使用 Transform Scale onClick

Question

我希望在单击 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:

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

(我只想使用 CSS 进行缩放。)

Answer 1

您应该使用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>