点击播放 css3 动画

Posted 2023-04-27

用css写了个动画，如何点击 一个按钮重复播放css3动画呢？

参考技术A

有属性控制的把：

animation-iteration-count
动画播放的次数，与transition不同，animation可以设置循环次数，如果想无限循环可以设置infinite。

希望能帮到你！

追答

谢谢

有问题继续交流

本回答被提问者和网友采纳 参考技术B 用animation-iteration-count吧

动画播放的次数，与transition不同，animation可以设定循环的次数，如果想无限循环可以设置成infinite。

望采纳 参考技术C 写一个点击事件 参考技术D click=“repeat”

第一次点击按钮不播放segue的自定义动画

【中文标题】第一次点击按钮不播放segue的自定义动画

【英文标题】：Custom animation of segue is not played the first time tapping the button

【发布时间】：2016-09-30 16:25:21

【问题描述】：

我遇到了一个不寻常的行为，我有点卡住了，问题如下。

我正在使用 BWWalkthrough 库，以便将 4 张幻灯片作为启动屏幕。因此，在我的 appdelegate 中，我有以下代码来初始化视图控制器：

let storyboard = UIStoryboard(name: "SlidesFlow", bundle: nil)

let walkthrough = storyboard.instantiateViewController(withIdentifier: "SlidesView") as! BWWalkthroughViewController
let page_zero = storyboard.instantiateViewController(withIdentifier: "page_1")
let page_one = storyboard.instantiateViewController(withIdentifier: "page_2")
let page_two = storyboard.instantiateViewController(withIdentifier: "page_3")
let page_three = storyboard.instantiateViewController(withIdentifier: "page_4")

walkthrough.delegate = self
walkthrough.addViewController(page_zero)
walkthrough.addViewController(page_one)
walkthrough.addViewController(page_two)
walkthrough.addViewController(page_three)

一切都按预期工作，所以这里没问题。在 viewController page_three 我有一个按钮，它使用自定义 segue 动画将我重定向到另一个视图控制器

class sentSegueFromRight: UIStoryboardSegue 

override func perform()

    let src = self.source as UIViewController
    let dst = self.destination as UIViewController

    src.view.superview?.insertSubview(dst.view, aboveSubview: src.view)
    dst.view.transform = CGAffineTransform(translationX: src.view.frame.size.width, y: 0)

    UIView.animate(withDuration: 0.25,
                               delay: 0.0,
                               options: UIViewAnimationOptions.curveEaseInOut,
                               animations: 
                                dst.view.transform = CGAffineTransform(translationX: 0, y: 0)
        ,
                               completion:  finished in
                                src.present(dst, animated: false, completion: nil)
        
    )

现在的问题是，如果我在普通视图控制器上使用相同的代码，则按钮和动画可以正常工作。问题是当我使用我的 BWWalkthrough 的最后一张幻灯片中定义的 segue 时。我第一次点击按钮时，应该出现的视图控制器确实出现了，但没有相应的动画。关闭它并再次点击按钮后，动画播放但返回错误：

在分离的视图控制器上显示视图控制器是 气馁

如果我将按钮与标准动画一起使用（不使用我的自定义动画代码），我不会收到任何错误，并且会播放默认动画。

我似乎无法找到解决此问题的方法。有没有人偶然发现这样的事情？

【参考方案1】：

这里的问题在于 BWWalkthrough 库，它使用滚动视图来呈现您添加的各种 ViewController 的所有视图。

因此，您将 dst.view 添加到滚动视图的开头（偏移屏幕宽度，0），然后将其转换为偏移（0,0）。

所有这些都在屏幕外，因为您当前处于演练的第三个屏幕中（偏移量 (screenwidth*3,0)）。因此，当 segue 结束时，您不会看到动画并直接看到呈现的视图控制器。

要解决这个问题，请将 segue 中的 dst.view 添加到滚动视图的超级视图中。即代替src.view.superview?.insertSubview(dst.view, aboveSubview: src.view) 在segue中写src.view.superview?.superview?.insertSubview(dst.view, aboveSubview: src.view)。 （假设您仅使用演练中的 segue）

如果你也打算在其他地方使用segue，那么你可以在segue中添加一个类型检查来检查src.view的superview是否是一个scrollview，如果是，将dst.view添加到superview滚动视图。