jQuery 怎么控制一个动画方向？

Posted 2023-05-13

我用jQuery的animate函数写了一个自定义动画，其实很简单，就是把一个已经显示的DIV层消失掉，可是我想控制动画的方向是“从上到下”消失，现在jQuery给我做到的恰恰相反，因为我这个效果是一个类似冒泡提示的动画，显示的时候是从下到上浮起来，我想消失是从上到下消失，而animate函数的参数不是只传一个最终动画完成时的样式吗？可我怎么控制动画的方向呢？望高人指点一二，先谢谢啦
这是我那句动画的代码：
$.fn.showDown = function(speed, easing, callback )
var props = top:'+=' + this.height(), height:'hide';
return this.animate( props, speed, easing, callback );
;

$("XX").animate(left:"",right:"",top:"",bottom:"",speed,fucntion());
第一个参数通过设置上下左右的值可以设置动画元素的运动方向，第二个参数可以设置运动的时间，第三个参数设置动画执行结束之后的操作。
第二、三个参数可以缺省。
第二个参数的值可以是fast、slow或者具体的数值（单位毫秒），缺省值的速度是400毫秒。
第三个参数缺省表示不动画结束后不执行任何操作。 参考技术A 引入jquery.js，复制以下代码，即可运行。
<style type="text/css">
.slide
position: relative;
height: 200;
lightyellow;


.slide .inner
position: absolute;
left: 0;
bottom: 0;
height: 100;
lightblue;
width: 100%

</style>

1、slidetoggle() 交替slidedown(),slideup()
html代码
<div id="slidebottom" class="slide">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$('#slidebottom button').click(function()
$(this).next().slideToggle();
);

2、左侧横向交替滑动 Animate Left
Html代码
<div id="slidewidth" class="slide">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$("#slidewidth button").click(function()
$(this).next().animate(width: 'toggle');
);

3、左侧横向交替滑动 Animate Left Margin （非隐藏）
Html代码
<div id="slideleft" class="slide" style="width: 50%;float: right">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$("#slideleft button").click(function()
var $lefty = $(this).next();
$lefty.animate(
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0
);
);

4、右侧横向滑动Slide to right
Html代码
<div id="slidemarginleft" class="slide" style="width: 60%;float: left">
<button>
slide it
</button>
<div class="inner">
Slide from bottom
</div>
</div>

Js代码
$("#slidemarginleft button").click(function()
var $marginlefty = $(this).next();
$marginlefty.animate(
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0
);
); 参考技术B //如果 style="position:absolute; top:0; left:0"
$.fn.showDown = function(speed, easing, callback )
var props = "top": $(this).height(), height:'hide';
return this.animate( props, speed, easing, callback );
;
//一般情况
$.fn.showDown = function(speed, easing, callback )
var props = "margin-top": $(this).height(), height:'hide';
return this.animate( props, speed, easing, callback );
; 参考技术C $("#id").animate("top":"200px",queue:false,duration:1000).animate("height":"0px",queue:false,duration:1000); 参考技术D 横着

UIPageViewController - 到下一个视图控制器的动画过渡与方向变化混合

【中文标题】UIPageViewController - 到下一个视图控制器的动画过渡与方向变化混合

【英文标题】：UIPageViewController - animated transition to next view controller mixes up with orientation change

【发布时间】：2019-02-07 13:27:01

【问题描述】：

我正在开发一个使用 UIPageViewController 的应用程序。在 UIPageViewController 子类中，我正在设置下一个视图控制器，如下所示：

guard let currentViewController = self.viewControllers?.first else  return 
guard let nextViewController = dataSource?.pageViewController(self, viewControllerAfter: currentViewController) else  return 

self.setViewControllers([nextViewController], direction: .forward, animated: true, completion:  (finished) in         
            // some finishing work
)

该应用支持纵向和横向。到下一个视图控制器的过渡是动画的。当该动画开始时，如果在此之后开始更改方向，则在两个动画结束时将有两个部分可见的视图控制器，而不仅仅是下一个。

我猜它在过渡到下一个视图控制器开始之前计算偏移量，然后使用此偏移量启动动画，然后旋转并调整视图大小，但不重新计算偏移量。或类似的东西。有谁知道如何解决或解决这个问题。

【参考方案1】：

我只对此做了一个快速的初步测试，但它可能为您完成这项工作。

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) 

    if let currentViewController = self.viewControllers?.first 

        coordinator.animate(alongsideTransition:  _ in
            // nothing here
        )  [unowned self] _ in
            self.setViewControllers([currentViewController], direction: .forward, animated: false, completion:  (finished) in
                // some finishing work
            )
        

    

    super.viewWillTransition(to: size, with: coordinator)

根据“一些整理工作” 的含义，它可能会有点棘手……可能需要测试finished 状态。

【讨论】：

感谢您的建议。我试过了，但有时我还是会遇到这个问题。