Question

希望我可以在这里获得一些帮助。我只想使用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：

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

我希望onClick函数附加到link元素。

这是第二页：

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;

任何快速帮助将不胜感激！谢谢大家！

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>

使用Transform Scale onClick

1 个答案: