使用 Transform Scale onClick

Question

我希望在单击 div 元素时缩放图像。

我想单击 link 的 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>

我想要附加到 link 元素的 onClick 函数。

这是第2页：

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。这样你就可以更好地控制 'scaling'

的时间

请参阅下面的代码片段：

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

使用 Transform Scale onClick

Use Transform Scale onClick

css

onclick

link-to