如何将光标移动到此动画的下一行?

时间:2019-06-04 19:09:07

标签: html css

我制作了动画,写成:

"[Your Name] blah blah"

输入效果。现在,我希望光标跳至下一行并写:

"[Your Father Name] blah blah"

我尝试添加<br>,但是它同时写了两行,我希望一个接一个地写。

.typewriter h1 {
  color: black;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
<div class="typewriter" class="username">
    <h1>
     [Your Name] blah blah
    </h1>
</div>

1 个答案:

答案 0 :(得分:0)

这是我对某人如何解决的解决方案:

基本上,您可以切换一个类,为您的import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController _tabController; @override void initState() { _tabController = TabController(length: 3, vsync: this); super.initState(); } @override Widget build(BuildContext context) { // this sliver app bar is only use to hide/show the tabBar, the AppBar // is invisible at all times. The to the user visible AppBar is below return Scaffold( body: Stack( children: <Widget>[ NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverAppBar( primary: true, floating: true, backgroundColor: Colors.blue,//.withOpacity(0.3), snap: true, pinned: false, bottom: TabBar( tabs: [ Tab( child: Text( "1", textAlign: TextAlign.center, ), ), Tab( child: Text( "2", textAlign: TextAlign.center, ), ), Tab( child: Text( "3", textAlign: TextAlign.center, ), ), ], controller: _tabController, ), ), ]; }, body: TabBarView( children: [ MyScreen1(), MyScreen2(), MyScreen3(), ], controller: _tabController, physics: new NeverScrollableScrollPhysics(), ), ), // Here is the AppBar the user actually sees. The SliverAppBar // above will slide the TabBar underneath this one. // by using SafeArea it will. Positioned( top: 0.0, left: 0.0, right: 0.0, child: Container( child: SafeArea( top: false, child: AppBar( backgroundColor: Colors.blue, // iconTheme: IconThemeData( // color: Colors.red, //change your color here // ), automaticallyImplyLeading: true, elevation: 0, title: Text("My Title",), centerTitle: true, ), ), ), ), ], ), ); } } class MyScreen1 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.yellow, child: Center( child: Text("My Screen 1"), ), ); } } class MyScreen2 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text("My Screen 2"), ), ); } } class MyScreen3 extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Center( child: Text("My Screen 3"), ), ); } } 提供所需的动画效果。

  • 第一行打字可见,并且具有类<div>

  • 第二个打字机行最初是隐藏的,其类别仅为first typing(无second

我现在有了一个js文件,该文件每500毫秒检查一次,如果第一行是通过检查完成的,则

typing

这意味着子项的宽度约为父项的宽度(〜)。 (差异为<10像素)

只要输入完成第一行(例如,它的宽度几乎是父div的宽度)。将类if ($('.first').parent().width() - $('.first').innerWidth() <= 10) 添加到要键入的第二行中,以便触发CSS中的动画,因为第二行现在也具有类typing

然后,您还可以从第一行中删除typing类,等等...(但请确保从第一行中删除typing后,first的css保持不变,或者否则外观会改变)

typing
var checking = 1;

function checkForChanges()
{
console.log($('.first').parent().width() - $('.first').innerWidth());
    if ($('.first').parent().width() - $('.first').innerWidth() <= 10) {
      //div is as big as parent
        $(".second").css("visibility", "visible");
        $(".second").addClass("typing");
        //$(".first").removeClass("typing");
    } else {
      // div is smaller/bigger than parent
    }
    
    setTimeout(checkForChanges, 500);
}

checkForChanges(checking);
.typewriter{
  width: 100%;
}

.typing {
  color: black;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
  typing 3.5s steps(40, end),
  blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}